jQuery can't catch div

Question

I get dynamic content with Ajax and i put it in a div, but the problem is that i have diffrent ids for some child divs(from the dynamic content). So i have added selectors for these divs, but as i said they are dynamic loaded and that means they are not visible anywhere before they are loaded(from another file) and inserted into the div. The problem comes when i insert the dynamic content. jQuery can't select these divs :( Is there any possible solution for my problem?

Hmm maybe my explanation is not good so i will speak with code :D

Example: This is the empty div <div id="div"></div>

Here is the jQuery code

$(document).ready(function(){
$.get("file.php", function(data){
$("#div").html(data);


$("#somediiv").click(function(){
alert("Yeah");
});

$("#somediv").click(function(){
$.get("otherfile.php", function(data){
$("#div").html(data);
});
});

$("#somediv2").click(function(){
$.get("file.php", function(data){
$("#div").html(data);
});
});

});
});

Everything works until the new content comes. In the new content when the "file.php" is loaded there is a div with id "somediiv" and when i click on it "otherfile.php" is going to be loaded and in the content of this div there is another div with id "somediiv", but when jQuery can't catch the click :(

Answer 1

I think you have to use live(). Or attach the event in the callback of $.get().

Answer 2

You want each dynamically loaded div to also contain the click functionality of the original div? powtac is right, live events will help you. Something like:

$(".someDivClass").live("click",function(){
  $.get("yourFile",function(data){
    $(this).append(data);
  });
});

That's assuming you want to append the data to the div you clicked, that wasn't really specified. Also you have to make sure the returned data contains the div with class "someDivClass".

Live events register for any matching selector plus all future matches (say that were added dynamically)