jQuery 单击事件在追加新按钮时未触发

jQuery click event not firing when appending new button

本文关键字：按钮 事件 单击 追加 新按钮 jQuery      更新时间：2023-09-26

当我单击"显示"按钮时，将调用显示侦听器并显示一个新的隐藏按钮。但是为什么当我单击"隐藏"时没有调用隐藏按钮？

 $('.myCss').append('<input type="button" class="show" value="Show"/>');
$('.show').on('click', function () {
        console.log('show clicked');
    $('.myCss').append('<input type="button" class="hide" value="Hide"/>');
});
    $('.hide').on('click', function () {
    console.log('hide clicked');
    $('.myCss').append('<input type="button" class="show" value="Show"/>');
    });

它与添加到页面的元素的顺序有关。如果你把隐藏代码放在显示代码中，它可以工作（尽管你应该检查你的逻辑）：

$('.show').on('click', function() {
    console.log('show clicked');
    $('.myCss').append('<input type="button" class="hide" value="Hide"/>');
    $('.hide').on('click', function() {
        console.log('hide clicked');
        $('.myCss').append('<input type="button" class="show" value="Show"/>');
    });
});​

js小提琴示例

在原始代码中，将单击事件绑定到隐藏按钮的代码存在于实际隐藏按钮之前，因此它实际上并未绑定到任何内容。通过在另一个代码块中移动它，可以延迟该块的执行。您也可以使用 .on() 将 click 事件绑定到 DOM 中更高级别的事件，但它实际上基本上是相同的最终结果。

从文档中：

事件处理程序仅绑定到当前选定的元素;它们 代码调用 .on（） 时必须存在于页面上。 要确保元素存在且可以选择，请执行事件 在文档就绪处理程序内绑定，用于 页面上的 HTML 标记。如果将新的 HTML 注入到页面中， 选择元素并在新 HTML 之后附加事件处理程序 放置在页面中。或者，使用委托事件附加事件 处理程序，如下所述。

因为当您设置事件时，.hide 元素不存在。您可以尝试设置以下事件：

$('.myCss').append('<input type="button" class="show" value="Show"/>');
$('.myCss').on('click', '.show', function () {
  console.log('show clicked');
  $('.myCss').append('<input type="button" class="hide" value="Hide"/>');
});
$('.myCss').on('click', '.hide', function () {
  console.log('hide clicked');
  $('.myCss').append('<input type="button" class="show" value="Show"/>');
});

这会将单击附加到 .myCss 元素（shich 始终存在），但仅在其中的 .hide 元素上触发单击时

触发函数。

此解决方案比每次创建元素时创建事件更有效。

问题是当您尝试在其上定义 OnClick 事件时，"隐藏"按钮不存在。我建议您添加它，设置 display=none，然后显示它

创建".hide"事件处理程序时，"隐藏"按钮尚不存在。

可以在创建元素后设置事件处理程序、使用事件冒泡或使用 .live。

有几个人正确地回答了隐藏按钮是在事件绑定到控件之后创建的。我建议采用一种不同的方法，即在更高级别（在我的示例中为文档）使用处理程序，该处理程序将附加到将来的控件（现已弃用的 .live 的当前方法）。

例：http://jsfiddle.net/kQ2JA/1/

这将更好地满足将事件绑定到所有当前和未来控件的期望。

相关文章：