Question

当我单击“显示”按钮时，将调用show listener并显示一个新的隐藏按钮。但是，当我点击“隐藏”时，为什么不调用隐藏按钮？

 $('.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"/>');
    });

Answer 1

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

$('.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"/>');
    });
});

<强> jsFiddle example

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

来自the docs：

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

Answer 2

因为在设置事件时，.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元素上触发时才会触发该函数。

这个解决方案更有效率，每次创建元素时都会创建事件。

Answer 3

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

Answer 4

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

您可以在创建元素后设置事件处理程序，使用event bubbling或使用.live。

Answer 5

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

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

这将更好地符合您对事件绑定到所有当前和未来控制的期望。

附加新按钮时，jQuery单击事件未触发

5 个答案: