为什么点击事件在此代码中不起作用(JSFiddle:http://jsfiddle.net/3WeP5/):
var holder = $("<div></div>");
$(document.body).append(holder);
var btn = $("<button>Click Here</button>");
btn.click(function(){alert('clicked');});
holder.append(btn);
holder.html("");
holder.append(btn);
你可以替换这一行:
btn.click(function(){alert('clicked');});
with(不再工作):
btn.bind("click",function(){alert('clicked');});
如果我不使用jquery并设置这样的javascript事件,它工作正常!!
btn[0].onclick=function(){alert('clicked');}
当我重新添加元素(按钮)时,为什么点击事件不起作用?我该如何解决?
答案 0 :(得分:6)
当.html()用于设置元素的内容时,任何内容都是 在该元素中完全被新内容所取代。 此外,jQuery删除了其他构造,如数据和事件 在用这些元素替换之前,来自子元素的处理程序 新内容。
holder.html("");
正在删除按钮的处理程序。如果您想保留它,可以使用clone
作为:
holder.append(btn.clone(true));
holder.html("");
holder.append(btn.clone(true));
答案 1 :(得分:3)
尝试on
jQuery ON
// You are better off just adding a id to the button
var btn = $("<button id=\"someButton\">Click Here</button>");
$(document).on('click', '#someButton', function(){
alert('clicked');
});
这样做是为文档添加一个点击监听器,当有人点击它检查的文件时,看看是否event.target === btn
这是一个演示
事件不起作用的原因是因为jQuery.html();
删除了在此处确认的事件侦听器https://github.com/jquery/jquery/blob/master/src/manipulation.js#L231
答案 2 :(得分:1)
$(document.body).on('click', btn, function() {
alert('clicked!');
});
您的代码不起作用,因为当首次加载脚本时,它会将该函数绑定到该特定元素,但是当您添加另一个脚本时,脚本不会再次运行,因此附加元素不会将其事件绑定。当我们添加事件委托时,我们会定位document.body
,因此当脚本加载时,事件会绑定到body
上的该元素。
对于早期版本的jQuery,您可以使用以下版本:
$(document.body).delegate(btn, 'click', function() {
alert('clicked!');
});