Question

i am using jquery and ajax.

i have some divs with ids like id=”apple-23″ , id=”apple-45″ and …

i have some jquery code like this:

 $("[id^=apple]").click(function(){
     elid = $(this).attr('id').split("-");
     pid = elid[1];
     alert(pid);
 });

the code works well for these divs.

but the ajax also return similar divs with similar id pattern like id=”apple-61″ and etc.
but the jquery code doesn’t work for these ajax produced divs.

why is it so? and how can i solve it?

Answer 1

You can use either .delegate() or .live() to handle events on elements that don’t exist yet.

If these divs have a common parent, it’s more efficient to use .delegate() instead of .live() (see here).

$("#divContainer").delegate("[id^=apple]", "click", function(){
     elid = $(this).attr('id').split("-");
     pid = elid[1];
     alert(pid);
});