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

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();
  }
});