问题描述:在页面中动态使用js添加的html中设置了onclick事件,生产页面后点击事件无效并提示:Cannot read property 'xxx' of undefined
如:
$('.test').append("<li><a href='javascript:void(0);' οnclick=\"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);