动态添加html事件无响应

最新推荐文章于 2022-06-02 17:06:52 发布

weixin_30492047

最新推荐文章于 2022-06-02 17:06:52 发布

阅读量332

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/aser1989/p/4260510.html

本文探讨了在页面中动态使用JS添加HTML时遇到的点击事件无效问题，并提供了详细的解决方案，包括如何为动态生成的DOM元素正确绑定事件监听器。

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

问题描述：在页面中动态使用js添加的html中设置了onclick事件，生产页面后点击事件无效并提示：Cannot read property 'xxx' of undefined

如：

$('.test').append("<li><a href='javascript:void(0);' onclick=\"search.fn.HotSearch('" + v + "')\">" + v + "</a></li>");

search.fn={
 HotSearch: function (key) {
            $("#_search_box").val(key);
            search.fn.DoSearch(true);
        },
 DoSearch:function(istrue){
        }
}

问题分析：造成这一情况的主要原因在于dom文档加载完毕后，js会因找不到元素无法对该元素注册事件侦听，因此；即使后来将dom元素动态添加进去，js无效。如果想对这种动态即时添加的dom元素本身注册事件侦听，可采取在动态添加dom元素后，再对该元素动态注册事件侦听。

除了通过元素id等各种通过属性获取对应元素并执行事件绑定的方式外，这里提供一种另类的方式：

   var html = "<li><a href='javascript:void(0);'>" + v + "</a></li>";
   var obj = $(html);
   obj.bind('click', function () { search.fn.HotSearch(v); });
   $('.test').append(obj);

转载于:https://www.cnblogs.com/aser1989/p/4260510.html