单击JQuery按钮不起作用

Question

我有一个正确运行的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");
    });

问题:为什么第二个代码段不起作用？

Answer 1

关于事件的简短故事:

由于您的按钮.saveBtn是动态创建的,因此不会在文档加载时初始化.但是为了将事件绑定到元素,它们通常需要在启动时初始化.但是,当所有事件都已绑定到元素时,会创建您的按钮.所以你需要做一些叫做事件委托的事情.这意味着您可以收听整个文档中的特定事件.当事件触发时,您会查找触发事件的元素.这样,甚至可以选择动态创建的元素.常见的方法如下:

$(document).on('click', '.saveBtn', function(){
  alert("Dynamic button clicked. Hurray!");
});

通过这种方式,您可以告诉整个事件document注册click事件并在此情况下将事件源与选择器进行比较.saveBtn.