модальный не показывается, когда содержание находится под 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>';
}

мой модал всплывает нормально, когда ajax admin-message.php не находится под setInterval

я не знаю, в чем проблемапочему мой модал не всплывает, когда ajax находится под setInterval

Answer 1

Вы недостаточно опубликовали свой код - например, где находится javascript / jQuery, который связывает whatever-is-being-clicked-on с событием щелчка?

Кроме того, когда вы говорите the code is updated every 3 seconds - что вы имеете в видутем?Какой код обновляется?Как это обновляется?

Распространенная проблема, с которой большинство из нас сталкивалось в какой-то момент, - это когда событие click привязано к некоторому js-коду.Например, если вы добавляете элемент whatever-is-being-clicked-on после , когда DOM был изначально визуализирован, то вы должны использовать метод .on():

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

Это называется делегирование события , и вы можете прочитать больше об этом здесь на api.jQuery.com и здесь, в SmashingMagazine .

Кроме того, если вы вводите какой-либо код javascript / jQuery после того, как DOM был визуализирован, то снова вы должны использовать .on()

Код, который вы разместили выше, явно не является неправильным, поэтому проблемабыть где-то еще.Поэтому, если использование .on() не решит проблему, обновите свой вопрос, чтобы предоставить больше кода.

---

Спасибо за размещение дополнительного кода.Я до сих пор не совсем уверен, что происходит (то есть, что пользователь нажимает сначала , затем что происходит, и что пользователь нажимает далее , и что происходит потом ...) НО Я вижу пару вещей:

1. Это то, о чем я говорил выше:

   $ (". Message_content"). Click (function ()

   Похоже, что div с классом .message_content вводится через AJAX, верно? Итак, вы не можете использовать приведенный выше код для привязки события click (ПОТОМУ ЧТО .click() должно быть связано, когдаDOM изначально отображается и не будет работать для элементов, которые впоследствии будут добавлены в DOM. Решение: использовать делегирование события:

   $ (документ) .on ('click', ".message_content", function ()

Однако, означает, что правильный div / class дляПривязать к событию click? Ваш предыдущий код js показывает, что div ".message_content" добавляется в качестве тела к окну сообщения ...?

Еще одна мысль: makeконечно в DOM никогда не бывает двух элементов с одинаковым ID.Помните, что идентификаторы и классы почти одинаковы!Если есть опасность дублирования идентификаторов, просто переключитесь на использование класса. (Вы знаете, Bootstrap очень популярен, и они делают все через классы! Идентификаторы полезны, но не обязательны - Bootstrap их не использует ... они вам не нужны, не совсем.) Это сделает вашу жизнь проще - и в этом все дело, верно? Облегчение жизни!