Three Dots jQuery on ajax load

Question

I am using the ThreeDots jQuery pulgin and it works great. I am having trouble using it on an ajax success event.

$.ajax({
    type: "POST",
    url: 'url',
    success: function(value) {
        $("#content").append(value);
        $(".ellipsis").ThreeDots({max_rows:3});
    }
});

I load some new data and append the new data to a div (this works great). When I call the ThreeDots function from inside the success event it takes about 1 minute to work and the browser is not responsive during this time. There are .ellipsis spans returned in the new data.

Is there a better way to be doing this? Is there something fundamentally wrong with my approach?

Thanks for any help.

UPDATE 8-7-2010.

@Nick, Thanks for your answer. I used this and I went one step further. The above still reruns on every ellipsis in content not just the newly returned ellipsis results.

I now do this:

$(value).appendTo("#content").find('.ellipsis' + document.getElementById('hidPage').value).ThreeDots({max_rows:3});
$("#hidPage").val(($("#hidPage").val()-0) + 1);

Answer 1

You can run the .ThreeDots() plugin only on the .ellipsis elements in the returned response, instead of re-running it on all of them, like this:

$.ajax({
    type: "POST",
    url: 'url',
    success: function(value) {
      $(value).appendTo("#content").find('.ellipsis').ThreeDots({max_rows:3});
    }
});

You can't chain it the reverse way because .ThreeDots() isn't chainable (it returns a custom object), but the above version should work fine.