zoukankan      html  css  js  c++  java
  • Ajax异步获取html数据中包含js方法无效的解决方法

    页面上使用js写了一个获取后台数据的方法

    复制代码
    function data() {
            var tab = $("#dic")
            $.ajax({
                url: '../demo.ashx?method=GetList',
                data: {},
                dataType: 'json',
                type: 'post',
                async: true,
                success: function (data) {
                    //console.log(data);
                    var parentStr = '';
                    $.each(data, function (i, item) {
                        //console.log(item.text);

    parentStr += "<div class='pull-right'> <a class='morechange' href='javascript:;' style='visibility: visible;'>更多+</a></div>"

    });
    tab.html(parentStr);
    }
    })

    }

    复制代码

    其中的

    <a class='morechange' href='javascript:;' style='visibility: visible;'>更多+</a>  绑定一个点击时间

    $('.morechange').click(function(){
        alert("弹出")
    });

    发现点击无效无效

      原来是 ajax载入新dom之前js 就加载完了,事件当然没有绑定到新载入的dom上

    解决方法:

       使用jquery的委托事件,将该方法委托到页面已经存在的一个节点上

    $("#dic").delegate('.morechange', 'click', function () { alert("弹出"); });

     问题解决。

    当然也可以不使用异步将async改为false也是可以的

    -转载

  • 相关阅读:
    007_排序_多重排序
    Locust 运行模式
    Locust介绍
    Locust环境搭建及报错解决
    8-02全局变量与输出语句
    8-01变量
    7-15ALL、 ANY、SOME子查询
    7-14 EXISTS子查询
    7-13IN和NOT IN 子查询
    7-12简单子查询
  • 原文地址:https://www.cnblogs.com/wenJiaQi/p/6422043.html
Copyright © 2011-2022 走看看