jQuery按钮单击不起作用

Question

我有一个正确运行的JQuery FIddle 。 它使用JQUERY步骤插件 。 现在，如果您在最后一步中运行JQuery FIddle ，您将找到三个按钮“保存”，“上一个”和“完成”。 如果单击“ 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 。

Answer 2

它不起作用，因为您正在动态创建按钮，将函数移至该行$(document).find(".actions ul").prepend(saveBtn) ，它将起作用。

$(document).find(".actions ul").prepend(saveBtn)
$(".saveBtn").click(function() {
    alert("You have been clicked");
});

这是您的提琴工作的更新https://jsfiddle.net/mjyq4oda/5/

Answer 3

因为您的保存按钮是动态的。 它是在某些点击事件后创建的。 尝试on函数，而不是click

  $(document).on("click", ".saveBtn", function() {
        alert("You have been clicked")
    });

Answer 4

您将在步骤更改时动态添加按钮，当没有类saveBtn按钮时，将初始化事件侦听saveBtn 。

$( ".saveBtn" )返回任何内容。

与其将其删除并附加到步骤更改上，不如将其hide并show 。 这样会更好。

查看工作提琴

这使用jQuery步骤的初始化来一次添加按钮（并非每个步骤都更改）。

onInit: function (event, currentIndex) { 
    var saveA = $("<a>").attr("href","#").addClass("saveBtn").text("Save");
    var saveBtn = $("<li>").attr("aria-disabled",false).append(saveA);
    $(document).find(".actions ul").prepend(saveBtn);
    $(".actions").find(".saveBtn").hide();
}

然后在步骤更改中，我们仅显示/隐藏：

onStepChanged:function (event, currentIndex, newIndex) {
    if(currentIndex == 2)
        $(".actions").find(".saveBtn").show();
    else
      $(".actions").find(".saveBtn").hide();

    return true;
}