javascript - 使用 .live() 使 jQuery 插件影响通过 Ajax 添加的新元素

Question

我正在构建一个通过 Ajax 插入新帖子的流(类似于 Facebook 墙)。

我还使用 jQuery 插件 Linkify 将任何链接字符串转换为可点击元素。

当用户输入一个链接时，帖子会立即显示在页面上(通过 Ajax)，但 Linkify 不会影响它，因为它一开始就不在 DOM 中。当我重新加载页面时，该链接就可以点击了。

有没有一种方法可以使用 .live() 使插件影响 future 由 ajax 添加的 DOM 元素？

部分代码:

//-------------Linkify

$('.main_container').linkify();

//-------------stream page structure

<div class="main_container">
    <div class="posts_insert">
         // target to be replaced via ajax
    </div>
    <div class="posts">
         // text of post #1
    </div>
    <div class="posts">
         // text of post #2
    </div>
    <div class="posts">
         // text of post #3
    </div>
</div>

//----------post structure, will replace .posts_insert above

<div class="posts_insert">
     // text of post #1
</div>
<div class="posts">
     // html
</div>

Answer 1

将行 $('.main_container').linkify(); 插入到您的 ajax 调用的成功函数中...

例如:

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(result){
    //Your functions here
    $('.main_container').linkify();
  }
});

这确保在新内容添加到页面后调用 linkify 函数，影响新帖子:)

** 编辑:澄清一下，应该调用 linkify 两次，一次是在页面加载时，一次是在 ajax 成功时:)