javascript - 当内容低于 setInterval 时模态不显示

Question

我使用ajax发送通知

我正在尝试使用 setInterval 打开模态点击通知内容

当我的通知内容在 setInterval 之外时，模态正常工作/弹出，但在 setInterval 模态下不弹出，甚至点击功能也未读取

my images

代码:模态弹出正确但不是每 3 秒更新一次

msgbox = "";
$.ajax(
{
    type: "POST",
    url: "admin-message.php",
    data: {msgbox: msgbox},
    success: function(result) 
    {
        $('#message_content').html(result);
    }  
}); 

此代码每 3 秒更新一次，但点击时不会弹出模态框

setInterval(function() 
{
    msgbox = "";
    $.ajax(
    {
        type: "POST",
        url: "admin-message.php",
        data: {msgbox: msgbox},
        success: function(result) 
        {
            $('#message_content').html(result);
        }  
    }); 
}, 3000);

这是我的管理消息 php 代码:

$sqlapplicant = "SELECT * FROM admin_notification ORDER BY id DESC";
$result = mysqli_query($db, $sqlapplicant); 
while($row = mysqli_fetch_array($result))
{
  echo '<div id='.$row['id'].' class="message_content"> 
   //content here image, name, message...
  </div>';
}

jquery点击通知框

$(".message_content").click(function()
{
    var id = this.id;
    $.ajax(
    {
        type: "POST",
        url: "message_modal.php",
        data: {id: id},
        success: function(result) 
        {
            $('#inbox_popup').html(result);
            $("#inbox_modal").modal('show');

        }  
    });

message_modal.php

if(isset($_POST['id']))
{
    //sql query update read status to 1
    echo '<div class="modal fade" id="inbox_modal" role="dialog">
                        <div class="modal-dialog modal-lg">

                        //modal content etcc....
                        </div>
                    </div>';
}

当 admin-message.php ajax 不在 setInterval 下时，我的模式弹出窗口正常

我不知道当 ajax 在 setInterval 下时为什么我的模式没有弹出的问题是什么

Answer 1

您发布的代码不够多 - 例如，将 whatever-is-being-clicked-on 绑定(bind)到点击事件的 javascript/jQuery 在哪里？

此外，当您说代码每 3 秒更新一次 - 您这是什么意思？正在更新什么代码？它是如何更新的？

我们大多数人在某些时候遇到的一个常见问题是，当点击事件绑定(bind)到某些 js 代码时。例如，如果您添加 whatever-is-being-clicked-on 元素 after DOM 已初始呈现，则您必须使用.on() 方法:

$(document).on('btnSomething', 'click', function(){
    //your ajax etc code goes here
});

这称为事件委托(delegate)，您可以阅读更多相关信息 here at api.jQuery.com和 here at SmashingMagazine .

此外，如果您在渲染 DOM 后注入(inject)任何 javascript/jQuery 代码，那么您必须再次使用 .on()

您上面发布的代码没有明显错误，所以问题一定出在其他地方。因此，如果使用 .on() 不能解决问题，请更新您的问题以提供更多代码。

---

感谢您发布附加代码。我仍然不完全确定发生了什么(即用户首先点击了什么，然后发生了什么，用户下一步点击了什么，然后发生了什么......) 但是我可以看到几件事:

1. 这就是我上面所说的:

   $(".message_content").click(函数()

   看起来类 .message_content 的 div 是通过 AJAX 注入(inject)的，对吗？所以，你不能使用上面的代码来绑定(bind)点击事件(因为 .click() 必须在 DOM 最初呈现时绑定(bind)，并且不适用于后来添加到的元素DOM) 解决方案:使用事件委托(delegate):

   $(文档).on('点击', ".message_content", function()

但是， 是绑定(bind)到点击事件的正确 div/类吗？您之前的 js 代码显示“.message_content”div 作为正文添加到消息框...？

另一个想法:确保DOM 中永远不会有两个元素具有相同的ID。请记住，ID 和类几乎相同!如果存在任何重复 ID 的危险，只需切换到使用类即可。 (您知道，Bootstrap 非常流行，它们通过类完成所有操作!ID 很有用，但不是必需的 - Bootstrap 不使用它们……您不需要它们，不是真的。) 这样做会让你的生活更轻松——这就是全部，对吧？ 让您的生活更轻松!