javascript - 在进行 AJAX 调用后，我的 jQuery 函数消失了

Question

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"));
})

我的 HTML 和 JavaScript 就是这样，当我单击标志按钮时，它会提醒 data-id3(效果很好)。我的问题在进行 AJAX 调用后开始

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 等于此 HTML 代码

<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>

看起来我得到了相同的 HTML，但我的 $id3 和 $values2 变量发生了变化，这就是我进行 AJAX 调用的原因。

得到这个后，我的新 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. -->

在那部分之后，我单击新的 .flag 按钮，但没有任何反应。为什么我的 jQuery 部分在进行 AJAX 调用后变得毫无用处。我的所有站点都相同，我的 jQuery 也相同，但是当我单击新的 .flag 按钮时，jQuery 不起作用。

可能是什么问题？

Answer 1

DOM 正在通过 AJAX 进行修改，从而影响您的事件监听器。将 $(".flag").click() 函数移至 if 语句内 XHR.onreadystatechange 函数的底部，或使用以下内容:

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