Question

我的代码如下：

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

<script type="text/javascript">
            $(document).ready(function () {

                $("#refreshButtons").on('click', function () {
                    $.ajax({
                        url: "/renderButtons.html",
                        error: function () {
                            alert('Error message');
                        },
                        success: function (HtmlResult) {
                            $("#action-buttons").html(HtmlResult);
                        },
                        complete: function() {
                            alert('Action buttons - loaded successfully');
                        }

                    });

                });


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



            });
    </script>

当我点击#closeButton时，我看到警报。那是对的。

但是当我加载div#action-buttons内容时（点击#refreshButtons），我的提醒就不会显示。为什么呢？

为什么浏览器控制台中没有消息？

“/ renderButtons.html”只是html文件：

<button type="button" name="MyButton" id="closeButton">close RMA</button>

Answer 1

按钮停止触发事件处理程序，因为它们没有连接到它（不再）。

您

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

行完全销毁 #action-buttons元素中的元素，用新元素替换元素。这些新元素并没有连接到你的事件处理程序，旧的元素是。

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

再次将它们挂起
使用事件委托

事件委托可能是你想要的。你将事件挂钩到一个不会被更改的容器（例如#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>

Answer 2

Ajax响应后;您的现有按钮将被删除，并且更新的按钮将被插入DOM中。因此，无论您events绑定到旧按钮，都会自动从上下文中删除。因此处理这种情况时你需要使用jquery的事件委托技术，同时附加事件如下：

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

在上述情况下;事件首先被document附加并监听，然后如果DOM中存在，则将其委托给ID为“#closeButton”的按钮。我希望我已经清除了你的怀疑。

javascript函数在ajax之后停止工作

2 个答案: