jquery 添加html元素后 html中click失效问题

最新推荐文章于 2023-03-05 23:14:31 发布

@航空母舰

最新推荐文章于 2023-03-05 23:14:31 发布

阅读量780

点赞数

CC 4.0 BY-SA版权

分类专栏： bug解决文章标签： javascript json ViewUI

本文链接：https://blog.youkuaiyun.com/hudeyong926/article/details/99540598

bug解决专栏收录该内容

12 篇文章

订阅专栏

本文探讨了在使用jQuery动态添加HTML元素时遇到的.click事件失效问题，并提供了两种解决方案：一是利用.on()方法绑定事件；二是采用委托事件处理。此外还提供了一个具体的示例代码，展示了如何在动态生成的元素上正确绑定点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jqeury 添加html 元素后 .click 失效问题

<script>
    function xxx() {
        var abc = '<li><h3 class="geegee">3</h3></li>';
        var acc = '<li><h3 class="geegee">4</h3></li>';
        output = $(abc + acc);
        $('#category').append(output);
    }
</script>

<script>
    $(document).ready(function() {
        $(".geegee").click(function() { //bug
            alert("a");
        });
    });
</script>

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）

$(".geegee").on("click",function() {
    alert("a");
});

委派事件

$("#category").delegate(".geegee","click",function(evt) {
    alert("a");
    evt.stopPropagation();
});

方法二：追加节点后再调用一次事件方法

function menuItem() {
    $('.rightmenu').contextmenu({
        target: '.context-menu',
        onItem: function (context, e) {
            //动态追加参数
            var id = context.context.id;
            if ($(e.target).context.href.indexOf("/id/") == -1) {
                url = $(e.target).context.href;
            }
            $(e.target).attr("href", url + "/id/" + id);
            if ($(e.target).data('operate') == 'copy') {
                //todo 显示弹窗
                $.get($(e.target).attr("href"), function (json) {
                    //todo 插入页面位置
                    $(json.html).insertAfter("#talk_"+id);
                    menuItem();
                });
                return;
            }
        }
    });
}
menuItem();