【问题标题】：jQuery stops working after ajax loadingajax加载后jQuery停止工作
【发布时间】：2014-07-10 17:22:26
【问题描述】：

一些信息

我正在开发一个可以在多种布局上加载数据的网页，因此用户可以选择哪个最好。可以加载在列表或卡片类界面中，使用ajax加载数据。
在此页面中，我还有一个通知用户收到的新消息。 ajax 功能是新的，当 php 脚本加载页面时，js 脚本（将带有未读消息数量的标记添加到菜单项上的链接）工作正常。

我正在使用 HTML5、PHP、jQuery 和 mySQL DB。
使用

将 jQuery 导入 HTML
所以这是一个最新版本。

问题

现在，当我使用 ajax 将数据加载到页面上时，js 脚本将不再工作。我在另一个 js 脚本中遇到了同样的问题，我设法通过使用委托事件绑定器解决了这个问题。
但是我的未读消息更新程序会按时间间隔运行，使用

<body onload="setInterval('unread()', 1000)">

unread() js 非常简单：

function unread() {
  $(document).ready(function(){
    $('#menu_item').load('ajax_countNewMsgs.php');
  });
}

它调用一个 php 脚本，该脚本从数据库中获取未读消息计数并回显到 jQuery 将指向的元素中。希望我说的很清楚。
问题是我无法弄清楚如何使用委托来调用定时事件。没有太大希望我已经尝试过

$(document).on('ready()','#menu_item', function () {
  $(this).load('ajax_countNewMsgs.php');
});

那没用。

我阅读了许多关于 js 在 DOM 更改后停止工作的帖子，但是，我再次想不出解决这个问题的方法，也没有找到类似的问题。任何帮助或提示将不胜感激。

已编辑更改第二个 php 脚本的名称

第二次编辑 - 试图让事情更清楚

我尝试了@carter 建议的方式

$(document).ready(function(){
  function unread(){
    $.ajax({
      url: 'ajax_countNewMsgs.php',
      type: 'GET',
      dataType: 'html',
      success: function(response){
        $('#menu_item').html(response);
      },
      error: function(response){
        //no error handling at this time
      }
    });
  }

  setInterval(unread(), 1000);
});

ajax_countNewMsgs.php 脚本连接到数据库，获取未读消息，并回显未读消息的数量。如果我尝试将 ajax 响应应用于另一个元素，例如

，结果与预期的一样：每 1 sec ，body html 就会改变。所以该功能正在工作。正如我所说，我的 JS 都没有更改 #menu_item。实际上这个元素是另一个 php scritp (menu.php) 的一部分，它被导入到页面的顶部。页面结构是这样的：

<html>
 <head>
  some tags here
 </head>
 <body>
  <?php include (php/menu.html); ?>this will include menu with the #menu_item element here
  <div id='wrapper'>
     <div id='data'>
       here goes the data displayed in two ways (card and list like). Itens outside div wrapper are not being changed.
     </div>
  </div>
 </body>
</html>

即使元素没有被重写，js 也无法找到它来更新它的值。这不是完整的代码，但我认为您可以看到正在执行的操作。

【问题讨论】：

你是否覆盖了定义 JS 的 DOM 元素？
有时我必须委派来解决此类问题，但通常您必须在页面加载后调用任何与内容相关的javascript。除非您自己专门调用它，否则新加载的 html 中的任何 JS 都不会触发。因此，在您的 ajax 成功中，您可以致电 setInterval('unread()', 1000)。这有意义吗？
您是否随时覆盖#menu_item 元素？正如@ShanRobertson 指出的那样，这可能会杀死setInterval()。当你完成覆盖元素时，只需调用setInterval(unread, 1000)。
@developerwjk 不，ajax 只更改没有 js 代码的 div。
@Shan Robertson，我会尝试，但我真的不知道将 setInterval 放在哪里（我可以使用 jQuery 将它“重新附加”到 body 标签吗？）跨度>

标签： javascript php jquery ajax reload

【解决方案1】：

$(document).on('ready()','#menu_item', function () {

是无效的事件侦听器。如果您想知道 DOM 何时准备就绪，您应该这样做：

$(document).ready(function () {

但是，我认为这实际上并不是您想要的。您的函数unread 将重复触发，但每次都会附加一个事件侦听器。相反，如果你想在初始页面加载后每隔这么多秒进行一次 ajax 调用，你应该做这样的事情（dataType 属性可以是 html、json 等。选择你的毒药）：

$(document).ready(function(){
  function makeCall(){
    $.ajax({
      url: 'ajax_countNewMsgs.php',
      type: 'GET',
      dataType: 'html',
      success: function(response){
        //handle your response
      },
      error: function(response){
        //handle your error
      }
    });
  }

  setInterval(makeCall, 1000);
});

【讨论】：

谢谢！我尝试使用您的建议，但我不知道如何处理此函数响应。我希望这个 ajax 请求的响应填充#menu_item html...我应该如何在成功时写下它：函数（响应）？而且我真的认为，即使数据加载不会更改菜单项，我也必须更改引用元素的方式。
即在 ajax 数据加载后停止工作的 ajax 搜索功能中，我设法通过将 $('#bt_search').click(function() {.... 更改为 $(document).on('click', '#bt_search'，函数（）{
$('#menu_item').html(response);
好的，谢谢，@carter ...这很明显，对不起我的跛脚。无论如何，问题并没有解决。我认为问题是 Jquery 找到了元素。我知道脚本仍在运行，如果我使用另一个 div 来接收响应，则脚本可以工作。但我无法访问原始元素。
现在我知道该函数正在被调用，@carter，因为如果我将接收结果的 div 更改为另一个（包装器），则 div 会更改，我可以看穿Firefox 的检查元素代码闪烁，每次更改或 1000 毫秒。有什么想法吗？提前致谢。

【解决方案2】：

删除你的unread函数：

$(document).ready(function(){

为什么？

文档已经“准备就绪”，并且该文档状态只会触发 1 次 - 之后永远不会调用“就绪状态”。使用以下语法：

jQuery(function($){

【讨论】：

感谢您的提示。这是有道理的，我修复了它。但这并不能解决我的问题...