DOM insertion / selection BUG

[megavolt]

BUG: after inserting HTML snippet into the DOM structure button2 will not be selected via $(#button2):

demo.js:

$("#button1").click(function() { $.post("index.php", {action:"ajax", subact:"showchar"},

inserting button 2 that comes from the index.php into testdiv1

function(data){$("#testdiv1").html(data);)}, "text")

});

$("#button2").click(function(){ alert("test"); });

index.php:

echo '<input type="submit" id="button2" value="This should give an alert" /> ';

so by clicking the button2 there should be an alert-popup, but it doesn't appear!. To fix this situation I write <input type="submit" id="button2" onclick="alert('test')" />. So I think there is something wrong by insertion into the DOM structure or element selection.

[megavolt]

BUG: after inserting HTML snippet into the DOM structure button2 will not be selected via $(#button2):

demo.js: $(document).ready(function(){

$("#button1").click(function() { $.post("index.php", {action:"ajax", subact:"showchar"},

inserting button 2 that comes from the index.php into testdiv1

function(data){$("#testdiv1").html(data);)}, "text")

});

$("#button2").click(function(){ alert("test"); });

});

index.php:

echo '<input type="submit" id="button2" value="This should give an alert" /> ';

so by clicking the button2 there should be an alert-popup, but it doesn't appear!. To fix this situation I write <input type="submit" id="button2" onclick="alert('test')" />. So I think there is something wrong by insertion into the DOM structure or element selection.

[wojtekk]

Try bind event after object will be created, example:

$(document).ready(
function(){
 $("#button1").click(
 function() {
  $.post("ticket-3133-test.php",
   {action:"ajax", subact:"showchar"},
   //inserting button 2 that comes from the index.php into testdiv1
   function(data){
    $("#testdiv1").html(data);
    $("#button2").click(function(){ alert("test"); }); // <- PROPOSED
    /*})*/ }, // <- ERROR?
    "text")
  });
 }
// $("#button2").click(function(){ alert("test"); }); // <- ERROR
); 

Demo:  http://wojtekk.net/jQuery/ticket.php?id=3133

[dmethvin]

The event binding methods can only bind to elements that exist at the time of execution. If you need to bind to elements that do not yet exist, try the .live method in jQuery 1.3.