1

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

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

5 回答 5

5

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

$('.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 示例

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

从文档：

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

于 2012-06-29T15:26:15.913 回答
1

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

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

于 2012-06-29T15:27:59.933 回答
0

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

于 2012-06-29T15:26:51.383 回答
0

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

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

于 2012-06-29T15:27:08.347 回答
0

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

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

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

于 2012-06-29T15:28:57.693 回答