selector not working in jquery after data loaded from ajax call

Question

Here is the html

<div class="parentDiv">
    <div class="childDiv">
        <!-- here to add button -->
    </div>
</div>

And here is the jquery code :-

$.ajax({
    url : "url.php",
    type : "POST",
    data : {someData : "some data"},
    success : function(data){
        $("#childDiv).html("<button id='clickMe'>Click me</button>");
    }
});

This code not working after element is added through ajax

$("#clickMe").on("click",function(){
    alert("please help!");
});

the #click me is not working.

How can I fix it, make it work ?

Answer 1

Because you are creating <button id='clickMe'>Click me</button> only after your asynchronous call returns, the moment you are trying to attach an event handler to it, it's not existent yet. Also, you are trying to attach the button to an element that doesn't exist - you don't have a div#ChildDiv, but it has the CSS class childDiv.

Instead attach the event handler directly after creating it:

$.ajax({
  url : "url.php",
  type : "POST",
  data : {someData : "some data"},
  success : function(data) {
    // create your button in your ASYNCHRONOUSLY
    // executed success handler function
    $(".childDiv").first().html("<button id='clickMe'>Click me</button>");
    // now that it exists, attach the click handler
    $("#clickMe").on("click",function(){
      alert("please help!");
    });
  }
});
// code that appears here will be executed BEFORE the success function!
// (synchronously)