Question

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>

Answer 1

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 🙂