jQuery RoundedCorners with AJAX

Question

I am using the jQuery RoundedCorners and it works great. Since I am doing AJAX calls I wanted to continue rounding my corners on the divs that I am appending with my AJAX callbacks.

To get rounded corners I use this syntax

$(document).ready(function(){
   $(".item").corner();
});

Since the document is already ready while I am making AJAX calls, this won't make my newly appended items rounded. I tried to make this call after I append to my html but it didnt work.

Any ideas on how to use this method so I dont have to use a second type to round corners after AJAX embeds new divs?

Thanks so much!

Answer 1

Add .corner() to the div you fill with the result of your Ajax request.

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html).corner();
  }
});

Answer 2

Perhaps keep track of (or find) the number of .items before the ajax call, then use :gt(index) to only affect the new items?

i.e. something like:

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    var numItems = $("#results .item").length;
    //however you load data
    $("#results .item:gt(numItems-1)").corner();
  }
});

---

EDIT: From your comments on @powtac's answer, it sounds like you may be completely re-loading the contents of the #results div. If that is the case, you won't need to worry about pre-existing .item divs and can use this:

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    //however you load data
    $("#results .item").corner();
  }
});