javascript函数在ajax之后停止工作

javascript functions stop working after ajax

本文关键字：之后 停止工作 ajax 函数 javascript      更新时间：2023-09-26

我的代码如下：

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

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

您的

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

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

你可以用两种方法来解决这个问题：

  1. 再次连接

  2. 使用事件委派

活动委托可能是您想要的。您将事件挂接在一个不会更改的容器上（例如#action-buttons），但告诉jQuery不要调用您的处理程序，除非事件通过了一个与您给它的选择器匹配的元素：

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

on文档中的更多信息。

实时示例：

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

在Ajax响应之后；您现有的按钮将被删除，新的按钮将插入DOM中。因此，无论您绑定到旧按钮的events是什么，都会自动从上下文中删除。因此，在处理这种情况时，您需要使用jquery的事件委派技术来附加事件，如下所示： 
$(document).on('click',"#closeButton", function () {
    alert('some text');
});

在上述情况下；事件首先由document附加和侦听，然后委派给id为"#closeButton"的按钮（如果DOM中存在）。我希望我已经消除了你的疑虑。

相关文章：