Question

我已经使用Ajax发出通知

im试图通过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之下时，我的模式弹出窗口很好

我不知道ajax低于setInterval时为什么我的模态没有弹出的问题是什么

Answer 1

您没有发布足够多的代码-例如，将whatever-is-being-clicked-on绑定到click事件的javascript / jQuery在哪里？

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

在大多数情况下，我们大多数人遇到的一个普遍问题是该click事件绑定到某些js代码时。例如，如果在之后添加whatever-is-being-clicked-on元素 ，则必须使用.on()方法：

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

这称为 事件委托 ，您可以阅读有关here at api.jQuery.com和here at SmashingMagazine的更多信息。

此外，如果要在呈现DOM之后注入任何javascript / jQuery代码，则必须再次使用.on()

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

感谢您发布附加代码。我仍然不太确定发生了什么（即用户首先单击，然后发生什么，用户单击 next ，然后发生了什么...）但是我可以看到几件事：

这就是我在上面谈论的内容：

$（“。message_content”）。click（function（）

似乎通过AJAX注入了类.message_content的div，对吗？因此，您不能使用上述代码来绑定点击事件（因为在最初呈现DOM时必须绑定.click()，并且对于以后添加到DOM中的元素不起作用） 解决方案： 使用事件委派：

$（document）.on（'click'，“ .message_content”，function（）

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

另一种想法：确保 DOM中永远不会有两个元素具有相同的ID。请记住，ID和类几乎相同！如果存在重复ID的危险，只需切换到使用类即可。 （您知道，Bootstrap非常受欢迎，它们通过类来做所有事情！ID很有帮助，但不是必须的-Bootstrap不使用它们……您不需要它们，不是真的。）这样做会让您的生活更轻松-这就是全部，对吧？ 让您的生活更轻松！

模式不显示内容何时低于setInterval

1 个答案: