模态未显示何时内容在setInterval之下

Question

我已经使用ajax

通知

我试图打开模态单击使用setInterval的通知内容

当我从setInterval出发的通知的内容正确工作/弹出窗口时，但是当setInterval模态下弹出窗口时，甚至单击函数，也不会在

上读取

我的图像

代码：模态弹出窗口正确，但每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

的情况下时，我的模态弹出式

我不知道为什么我的模态在setInterval

Answer 1

您的代码中没有足够的帖子 - 例如，将whatever-is-being-clicked-on绑定到单击事件的JavaScript/jQuery在哪里？

另外，当您说the code is updated every 3 seconds-那是什么意思？正在更新什么代码？如何更新？

我们大多数人在某个时候遇到的一个常见问题是，当点击事件绑定到某些JS代码时。例如，如果在 之后添加whatever-is-being-clicked-on元素最初已渲染DOM，则必须使用.on()方法：

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

这被称为事件委托，您可以在api.jquery.com和SmashingMagazine上阅读有关它的更多信息。

另外，如果您要在DOM渲染后注入任何JavaScript/jQuery代码，则再次必须使用.on()

您上面发布的代码显然不正确，因此问题必须在其他地方。因此，如果使用.on()不能解决问题，请更新您的问题以提供更多的代码。

---

感谢您发布其他代码。我仍然不确定发生了什么（即用户单击什么 first ，那会发生什么，用户点击了 next ，然后发生什么...）但是我可以看到几件事：

1. 这是我上面谈论的：

   $（"。message_content"）。单击（function（）

   通过AJAX注入了带有.message_content类的DIV，对吗？因此，您不能使用上面的代码绑定点击事件（因为.click()最初呈现DOM时必须绑定，并且对后来添加到DOM的元素不适用于DOM）>解决方案：使用事件委托：

   $（document）.on（'click'，" .message_content"，function（）

但是，是正确的div/class可以绑定到单击事件吗？您较早的JS代码显示" .message_content"div被添加到消息框中...？

另一个想法：确保 DOM中永远不会有两个具有相同ID的元素。请记住，ID和课程几乎相同！如果有重复ID的危险，只需切换到使用类。（您知道，Bootstrap是超大的，它们通过课程做所有的事情！ID很有帮助，但不必em>这样做将使您的生活更轻松 - 这就是全部，对吗？使您的生活更轻松！