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

Question

一些信息

我正在开发一个可以在多个布局上加载数据的网页，因此用户可以选择哪个最佳。它可以加载到列表或接口等卡中，并使用ajax加载数据在此页面中，我还有一个用户收到的新消息的通知程序。 ajax函数是新的，当页面由php脚本加载时， js 脚本（将带有未读消息数量的徽章添加到菜单项上的链接）工作正常。

我正在使用 HTML5 ， PHP ， jQuery 和mySQL数据库。
使用
将jQuery导入HTML
＆lt; script src =“https://code.jquery.com/jquery.js”＆gt; ＆LT; /脚本＆GT;
所以这是最新版本。

问题

现在，当我使用ajax将数据加载到页面上时， js 脚本将不再起作用。我与另一个 js 脚本有同样的问题，我设法通过使用委托事件绑定器来解决它。
但我的未读消息更新程序使用

按时间间隔运行

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

unread（）js非常简单：

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

它调用 php 脚本，该脚本从数据库中获取未读的msgs计数并回显到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响应应用于另一个元素，比如，＆lt; body＆gt;结果如预期：在每1秒，身体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也无法找到更新它的价值。这不是完整的代码，但我认为你可以看到正在做的事情。

Answer 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);
});

Answer 2

删除 unread功能

$(document).ready(function(){

<强> WHY吗

文档已经“准备好”，此文档状态将仅触发1x - 之后将永远不会调用“就绪状态”。使用以下语法：

jQuery(function($){

jQuery加载后jQuery停止工作

一些信息

问题

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

2 个答案: