• 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也是可以的

  • 相关阅读:
    解析网页源码方式
    vue踩坑--细节决定成败
    fallowing-travelvue
    学会不怕
    eslint代码规范检测
    三次握手+四次挥手
    小白的学习笔记
    es6数组
    css知识整理
    JavaScript之事件循环,宏任务与微任务
  • 原文地址:https://www.cnblogs.com/lastcode/p/6419336.html
Copyright © 2020-2023  润新知