2

HTML:

<div class="divses">
  <div class="point" data-id3="'.$id3.'" data-values2="'.$values2.'">
    <input type="button" class="buttonic"></input>
    <input type="button"  class="buttonic"></input>
    <input type="button"  class="flag"></input>
  </div>
</div>

jquery:

$(".flag").click(function() {
  var id3 = alert($(this).parent().data("id3"));
})

My HTML and JavaScript is just like that and when I clicked flag button it alerts data-id3(works great). My problem start after making an AJAX call

AJAX:

var page = $(".buttonic").data("page");
var XHR = new XMLHttpRequest();

XHR.open("POST", "turnthepage.php", true);
XHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

XHR.onreadystatechange = function() {
  if(XHR.readyState == 4 && XHR.status == 200) {
    $(".divses").children(".point").remove();
    $(".divses").append(XHR.responseText);
  }
}

XHR.send("page="+page);

XHR.responseText is equal this HTML code

<div class="point" data-id3="'.$id3.'" data-values2="'.$values2.'">
  <input type="button" class="buttonic" />
  <input type="button"  class="buttonic" />
  <input type="button"  class="flag" />
</div>

It looks like I'm getting same HTML but my $id3 and $values2 variables chancing and that's why I make an AJAX call.

after getting this, my new HTML:

<div class="divses">
  <div class="point" data-id3="'.$id3.'" data-values2="'.$values2.'">
    <input type="button" class="buttonic"></input>
    <input type="button"  class="buttonic"></input>
    <input type="button"  class="flag"></input>
  </div>
</div><!-- please pay attention it is not same as first HTML $id3 and $values2 has changed. -->

After that part I click my new .flag button but nothing happens. Why my jQuery section become useless after making an AJAX call.my all site is same and my jQuery is same but when I click my new .flag button jQuery doesn't work.

What could be the problem?

Shiladitya
  • 12,003
  • 15
  • 25
  • 38
user3301042
  • 352
  • 2
  • 14
  • possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – T J Oct 11 '14 at 11:42

1 Answers1

4

The DOM is being modified via AJAX, affecting your event listener. Move your $(".flag").click() function to the bottom of your XHR.onreadystatechange function inside the if statement, or use the following:

$(document).on('click', '.flag', function () {
    var id3 = alert($(this).parent().data("id3"));
});
athms
  • 948
  • 5
  • 8
  • Which is a delegated handler with `.on()` [jQuery documentation](https://api.jquery.com/on/#on-events-selector-data). But I did not know you need it, when you add the same (so to say). But if you use `document` it bubbles up all the way and could trigger other `event handlers`... – loveNoHate Mar 07 '14 at 16:41
  • 1
    @dollarVar yes, targeting more specifically like in Tilwin Joy's answer would be more sensible. As long as there are no instances of .flag outside of #divses which need to be monitored - I wasn't sure. – athms Mar 07 '14 at 16:46