ajax 后 javascript 函数停止工作

Question

<分区>

Answer 1

按钮停止触发事件处理程序，因为它们不再(不再)连接到事件处理程序。

你的

$("#action-buttons").html(HtmlResult);

行 完全破坏 #action-buttons 元素内的元素，并用新元素替换它们。这些新元素没有连接到您的事件处理程序，旧元素是。

您可以通过两种方式解决此问题:

1. 再次联系他们

2. 使用事件委托(delegate)

事件委托(delegate)可能是你想要的。您将事件挂接到不会更改的容器(例如 #action-buttons)，但告诉 jQuery 不要调用您的处理程序，除非事件通过与您提供的选择器匹配的元素传递它:

$("#action-buttons").on('click', "#closeButton", function () {
    alert('some text');
});

更多内容在 on documentation .

实例:

$(document).ready(function() {

  var counter = 0;
  $("#refreshButtons").on('click', function() {
    // Simulating the ajax here
    setTimeout(function() {
        ++counter;
        $("#action-buttons").html(
          '<button type="button" name="MyButton" id="closeButton">close RMA #' + counter + '</button>'
        );
    }, 10);
  });


  $("#action-buttons").on('click', "#closeButton", function() {
    alert('some text');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="action-buttons" class="container">
  <button type="button" name="MyButton" id="closeButton">close RMA</button>
</div>
<div>
  <button type="button" id="refreshButtons">refresh Buttons</button>
</div>