jQuery - Удалить элемент

Question

Я создаю социальную сеть, и люди получают уведомления, когда получают новые сообщения. Когда они щелкают ссылку сообщений в заголовке, уведомления о сообщениях, как предполагается, будут удалены на go. Но это не так. Я попадаю на страницу сообщений, но уведомление все еще остается там. Каждый раз, когда я щелкаю по нему, он уходит примерно на 1 секунду и возвращается. Любая помощь?

<a onClick="removeBadge();" href="messages.php">Messages
  <?php

    if($num_messages > 0)
      echo '<span class="notification_badge" id="unread_message">' 
        . $num_messages . 
        '</span>'
  ?>    
</a>

<script type="text/javascript"> 
  function removeBadge(user) {

    $("span").remove("#unread_message");

  }
</script>

Answer 1

Похоже, что вы используете серверную переменную $num_messages, которая представляет собой значение, которое существует на вашем сервере, но которое ваш клиент не может контролировать, если вы не отправите запрос обратно на свой сервер, явно обновив количество сообщений который используется для заполнения значения $num_messages на вашей странице messages.php.

Вы удаляете уведомление с экрана на странице HTML с помощью JavaScript, но оно возвращается, как только вы загружаете messages.php, потому что значение фактически не обновляется на сервере, поэтому когда страница перезагружается, она обслуживается с исходным значением $num_messages, как и раньше.

Из вашего removeBadge() обработчика кликов вы можете отправить запрос на страницу PHP, которая обрабатывает запрос для обновления любых данных, используемых для заполнения $num_messages. Вы можете сделать это асинхронно, однако вы столкнетесь с проблемами на messages.php, если асинхронная операция по обновлению количества сообщений не будет завершена до отображения страницы messages.php. Вместо использования тега <a>, который будет перемещаться сразу при нажатии, есть несколько вариантов; переключитесь на что-то вроде тега <span> и перенаправьте на сообщения. php, когда обратный вызов asyn c завершится успешно. JQuery имеет очень простую в использовании асинхронную функциональность. Ознакомьтесь с методом asyn c . Настройте перенаправление на messages.php для успешного обратного вызова.

Надеюсь, это поможет.

Answer 2

Это из-за атрибута href тега привязки, щелкнув его, вы перенаправляете на сообщения. php page.

Вместо этого вы можете добавить target = "_ blank" в свой тег привязки, это откроет сообщения. php в новом окне, а также удалить уведомление с родительской страницы.

<a onClick="removeBadge();" href="messages.php" target="_blank">Messages
        <?php

            if($num_messages > 0)
            echo '<span class="notification_badge" id="unread_message">' . $num_messages . 
            '</span>'
        ?>  
    </a>

<script type="text/javascript">

    function removeBadge(user) {

        $("#unread_message").remove();

    }
</script>

Answer 3

Возвращаемое значение из кода onClick - это то, что определяет, будет ли обработано присущее ссылке действие по щелчку или нет - возвращение false означает, что оно не обрабатывается, но если вы вернете true, браузер продолжит обработку его после вашей функции возвращает и go к правильной привязке.

На тот же сценарий уже дан ответ здесь