Facebox Doesn't work after another data loaded using AJAX

Question

I was create a comment area in a article, and then, the member name who posted the comment will have a link and the link can be click to show the member profile using facebox, the problem is when the another member comment loaded with AJAX, the link cannot work properly to show member profile using Facebox.

Member name with link:

<a href="/view/profile/<?php print $data['mId']; ?>/" title="View <?php print stripquote($data['mName']); ?>'s Profile" rel="facebox" class="membername"><?php print $data['mName']; ?></a>

Load more comment button:

<a href="#" id="<?php echo $msg_id; ?>" class="more">Load more comment</a>

facebox config:

jQuery(function($){
    $('a[rel*=facebox]').facebox();
});

So, how make the facebox work properly after load more member comment with AJAX. Tq

Answer 1

There are a few ways to go about this.

You could set up the facebox links after the ajax load, e.g.

// I don't know how you're doing the ajax load, but say you were using jQuery #load
$(".more").click(function() {
  $("#yourdiv").load("something.php", function() {
     $(this).find("a[rel*=facebox]").facebox();
  });  
});

Or you could get a little fancier and load the facebox lazily when the links are clicked, something like:

$(document).on("click", "a.facebox", function() {
  // I've never used facebox, but according to the docs (link below), this should work.
  $.facebox({ ajax: $(this).attr('href') });
});

See Controlling Facebox Programatically in the docs.