JQuery 按钮点击不起作用

Question

我有一个 JQuery FIddle properly running. It uses a JQUERY Steps PlugIn . Now if you run JQuery FIddle 在最后一步你会发现三个按钮 "Save"、"Previous" 和 "Finish"。如果我点击 Save button，我想显示一条警告说 "you have been clicked"。如果滚动到 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

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

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

Answer 2

您在步骤更改时动态添加按钮，当没有带有 class saveBtn.

的按钮时，您的事件侦听器将被初始化

$( ".saveBtn" ) returns 什么都没有。

不是删除它并在步骤更改时附加它，而是 hide 和 show。这样就更好了。

看工作fiddle

这使用初始化 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();
}

然后在步骤更改中我们只是 show/hide:

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

    return true;
}

Answer 3

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

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

这是您 fiddle 工作 https://jsfiddle.net/mjyq4oda/5/

的更新

Answer 4

一个关于事件的小故事：

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

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

这样您就可以告诉整个 document 注册 click 事件并将事件源与您的选择器进行比较，在本例中为 .saveBtn.

JQuery 按钮点击不起作用

JQuery button click does not work

javascript

jquery

jquery-steps

一个关于事件的小故事：