作者:晴儿19082 | 来源:互联网 | 2023-01-28 16:19
我有一个正确运行的JQuery FIddle.它使用JQUERY Steps PlugIn.现在如果你在最后一步运行JQuery FIddle,你会发现三个按钮"Save","Previous"和"Finish".如果我点击,Save button
我想显示一条提示"你已被点击".如果您滚动到JSFiddle中HTML部分的底部,您将找到下面的代码.
代码工作正常:
// on Save button click
$(".actions").on("click",".saveBtn",function(){
alert("You have been clicked!");
});
});
代码无效:
$( ".saveBtn" ).click(function() {
alert("You have been clicked");
});
问题:为什么第二个代码段不起作用?
1> 小智..:
关于事件的简短故事:
由于您的按钮.saveBtn
是动态创建的,因此不会在文档加载时初始化.但是为了将事件绑定到元素,它们通常需要在启动时初始化.但是,当所有事件都已绑定到元素时,会创建您的按钮.所以你需要做一些叫做事件委托的事情.这意味着您可以收听整个文档中的特定事件.当事件触发时,您会查找触发事件的元素.这样,甚至可以选择动态创建的元素.常见的方法如下:
$(document).on('click', '.saveBtn', function(){
alert("Dynamic button clicked. Hurray!");
});
通过这种方式,您可以告诉整个事件document
注册click
事件并在此情况下将事件源与选择器进行比较.saveBtn
.