Question

我有一个类似Facebook的页面，上面有帖子和评论。我在每个帖子上都有一个回复链接，当点击时，应该将光标移动到该帖子的评论表单的文本区域，并且确实如此。我只是用

$('.reply-link').parents('article').find('textarea').focus();

但是，我在这个页面上也有无限滚动，并且在自己的包装div中包含了附加的文章。

我的问题是我的回复链接不适用于无限滚动加载的包装div内的任何文章。我有一个JSFiddle来演示这一点。

http://jsfiddle.net/Lp2kG/

如果有人可以向我解释为什么会这样，以及如何正确处理，我会很感激。谢谢！

Answer 1

当您添加新内容时，该新内容没有任何事件处理程序。要获得新内容的事件处理程序，您必须在添加内容后设置事件处理程序，或者在静态父项上使用委派事件处理。

在这种情况下，最接近的公共静态父级（在您的jsFiddle中）是正文，因此您可以在那里安装单击处理程序，然后使用.on()的委托形式，如.on('click', selector, fn)。

您可以通过以下方式更改事件处理代码来切换到委派事件处理：

jQuery('.reply-link').unbind().click(function() {
   $(this).parents('article').find('textarea').focus(); 
});

到此：

jQuery(document.body).on('click', '.reply-link', function() {
   $(this).parents('article').find('textarea').focus(); 
   return false;
});

注意，这也可以通过从jQuery事件处理程序返回false来防止链接的默认行为。

工作演示：http://jsfiddle.net/jfriend00/ah8gX/

Answer 2

我看到两个问题。你需要一个防止默认值，所以链接不会执行默认操作＃，它将滚动到页面顶部。

此外，没有为初始绑定后添加的链接分配点击事件。你只需要重新绑定它们。最简单的选择是在函数中执行它并在追加之后再次调用它：

function assignListeners(){
    jQuery('.reply-link').unbind().click(function(e) {
        e.preventDefault();
       $(this).parents('article').find('textarea').focus(); 
    });
}

更新小提琴： http://jsfiddle.net/Lp2kG/1/

为什么我的.focus（）不适用于附加内容？

2 个答案: