当添加新按钮时，jQuery点击事件不会触发

当我单击“显示”按钮时，将会调用show listener并显示一个新的隐藏按钮。但是，当我点击'隐藏'时，为什么隐藏按钮不被调用？当添加新按钮时，jQuery点击事件不会触发

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

来源

2012-06-29 blue-sky

事件绑定是在加载时创建的。由于隐藏按钮不存在，当页面加载时，它不起作用。您需要在创建按钮时添加绑定 – JSantos

它与要添加到页面的元素的顺序有关。如果显示的代码它的工作范围内下降的隐藏代码（尽管你应该检查你的逻辑）：

$('.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事件到隐藏按钮存在于实际的隐藏按钮之前，所以它实际上并不与任何东西绑定。通过在另一个代码块中移动它可以延迟执行该块。您还可以使用.on()将点击事件绑定到DOM中较高的事件，但实际上它们的最终结果基本相同。

the docs来自：

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

来源

2012-06-29 15:26:15 j08691

这比添加到父元素的点击事件的性能差得多，就像我建议的一样......除了点击显示然后隐藏然后再显示它不起作用。 – iwiznia

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

来源

2012-06-29 15:26:51 Pixou

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

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

来源

2012-06-29 15:27:08 Iain

.live已弃用... http://api.jquery.com/live/ – iwiznia

有趣。我知道它已经变得不合时宜，但没有意识到这种贬低。谢谢！ – Iain

是的，除了.on是更好的，因为活着附加到身体的事件，并等待泡沫起来，你可以设置它在你想要的元素 – iwiznia

因为当您设置事件时，.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-29 15:27:59 iwiznia

有些人已经正确地回答说隐藏按钮是在事件绑定到控件后创建的。我建议使用不同的方法在较高级别（在我的示例中为文档）中使用处理程序，该处理程序将附加到将来的控件（当前已过时的.live）。

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

这将更好地满足您的活动结合当前和未来所有的控制预期。

来源

2012-06-29 15:28:57 Joe

.live被弃用在最新版本的Jquery –

谢谢你的头向上！ – Joe

不客气 –

当添加新按钮时，jQuery点击事件不会触发

回答

相关问题