Question

我正在使用.on()绑定到具有单击事件的按钮元素，它将正确绑定到当前加载的元素，但是当添加新元素时不会向他们提出任何想法吗？

$('article#content').on('click', 'button', loadData);

function loadData() {
    var moreTxt = $(this).parent().find('section.hidden')
    var txt = moreTxt.is(':visible') ? 'Read More' : 'Hide';
    $(this).text(txt);
    moreTxt.slideToggle('slow');
}

JsFiddle = http://jsfiddle.net/jRtMc/

Answer 1

.on()的委托形式允许您将处理程序附加到将始终存在的某个父元素，然后根据点击源的位置过滤事件。这允许您设置一次处理程序，而不用担心您是否已将其附加到新对象。

在此表单中，附加处理程序后，不得删除您为.on()调用的元素。如果您在调用$('article#content')时必须存在on()，则必须是您关注的button的父级（可能存在，也可能不存在），且不得删除/创建/ {在致电.on()后重新创建。

我怀疑您的#content是动态生成的。（如果没有，您还有其他问题，因为您的按钮引用了.parent()，它始终是#content）如果article是动态的，您需要将处理程序附加到永久父级。您可以随时使用body，但非常严厉，因为正文中的任何点击都必须通过此处理程序进行过滤。此外，您不能拥有多个相同的ID，因此您需要使用类（.content），而不是：

$('body').on('click', '.content button', loadData);

相反，找到一个永久父母并使用它：

$('#ParentOfArticles').on('click', '.content button', loadData);

http://jsfiddle.net/HrE6J/

Answer 2

您的网页似乎有多篇文章内容，因此您不得使用相同的ID识别它们。您应该创建一个content类，然后选择它们。

$('article.content').on('click', 'button', loadData);

.on（）不绑定到未来的元素jQuery

2 个答案: