Using .live() to make jQuery plugin affect new element added via Ajax

I am building a stream (similar to Facebook wall) that inserts new posts via Ajax.

I also use the jQuery plugin Linkify to transform any link strings into a clickable element.

When a user enters a link, the post is immediately shown on the page (via Ajax) but Linkify does not affect is since it wasn't in the DOM to begin with. When I reload the page, the link is then clickable.

Is there a way of using .live() to make a plugin affect future DOM elements added by ajax?

Some code:

//-------------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>

insert the line $('.main_container').linkify(); into the success function of your ajax call...

eg:

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

This makes sure the linkify function is called AFTER new content is added to the page, affecting new posts :)

** EDIT: just clarifying, linkify should be called twice, once on page load and then once on ajax success :)

no, .live() is for attaching event handlers. you will need to process new data in your ajax success handler.

You can upgrade linkify source code itself and use .live() instead of .click() and other event binding used in linkify. There is few code change needed. Just like this one:

Line 239: $(this).click(function()... ==> $(this).live('click', function()...