javascript之ajax 加载后 jQuery 停止工作

xiaohuochai 阅读：30 2025-12-25 22:24:30 评论：0

一些信息

我正在开发一个可以在多种布局上加载数据的网页，以便用户可以选择最好的一个。可以以列表或者卡片之类的界面加载，使用ajax加载数据。
在此页面中，我还有一个用户收到的新消息的通知程序。 ajax 函数是新的，当 php 脚本加载页面时，js 脚本(将带有未读消息数量的徽章添加到菜单项上的链接)工作正常。

我正在使用 HTML5、PHP、jQuery 和 mySQL 数据库。
使用
将 jQuery 导入到 HTML 中
<script src="https://code.jquery.com/jquery.js"> </script>
所以这是最新版本。

问题

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

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

unread() js 非常简单:

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

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

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

这不起作用。

我读了很多关于 DOM 更改后 js 停止工作的文章，但是，我再次找不到解决该问题的方法，也没有找到类似的问题。任何帮助或提示将不胜感激。

已编辑更改第二个 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 秒，正文 html 就会更改。所以该功能正在运行。正如我所说，我的 JS 没有更改 #menu_item。实际上，这个元素是另一个 php 脚本 (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>

即使 elemente 没有被重写，js 也无法找到它来更新它的值。这不是完整的代码，但我想您可以看到正在做什么。

请您参考如下方法:

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

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。