Question

我正常运行JQuery FIddle。它使用JQUERY Steps PlugIn。现在如果你在最后一步运行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" )什么都不返回。

只需hide和show，而不是删除它并将其附加到步骤更改上。这会更好。

见工作fiddle

这使用jQuery步骤的init来添加按钮一次（不是每一步更改）。

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;
}

单击JQuery按钮不起作用

4 个答案:

关于事件的简短故事：