0

我正在使用单击.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/

4

2 回答 2

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/

于 2013-04-05T17:10:06.767 回答
0

您的页面中似乎有多个文章内容，因此您不能使用相同的 id 来标识它们。您应该创建一个content类，然后选择它们。

$('article.content').on('click', 'button', loadData);
于 2013-04-05T17:16:07.740 回答