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

通过AJAX修改DOM，影响您的事件监听器。将您的$(".flag").click()函数移动到if语句中XHR.onreadystatechange函数的底部，或使用以下内容：

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

在进行AJAX调用后，我的jQuery函数就死了

1 个答案: