удаление содержимого div с помощью Jquery "empty" не работает

Question

Я пытаюсь удалить содержимое определенного div, который в основном состоит из элементов списка и заголовка, с помощью jquery empty, чтобы я мог заменить его новым содержимым. Когда я запускаю код, происходит следующее: весь элемент div мигает и мигает замененное содержимое, а затем снова появляется старый. Может кто-нибудь сказать мне, что я делаю не так? Вот выдержка из моего кода -

$("#msg_tab").bind("click",function(){
  $("#sidebar1").remove(); 
  var html=".....";
  $("#sidebar1").append(html);
 });



<div id="sidebar1" class="sidebar">
   <ul>
    <li>
     <h2>Messages</h2>
     <ul>
      <li><a href="#">Compose New Message</a></li>
      <li><a href="#">Inbox</a></li>
      <li><a href="#">Outbox</a></li>      
      <li><a href="#">Unread</a></li>
      <li><a href="#">Archive</a></li>
     </ul>
    </li>
   </ul>
  </div>

Другой вопрос: как мне написать многострочную строку HTML-кода в javascript, чтобы java распознал как строковое значение? Размещение прямой косой черты в конце нормально, когда строка не является HTML-кодом, но в HTML-коде я не могу понять, как избежать прямой косой черты от конечных тегов. Работа. Буду признателен, если кто-нибудь сможет пролить свет и на этот вопрос.

Answer 1

Вы используете неправильную функцию. Вы хотите empty():

$("#sidebar1").empty();

remove() полностью удалит элемент.

В качестве альтернативы вы можете использовать html() для замены всего содержимого.

Однако ваша ключевая проблема заключается в том, что вы не прекращаете распространение событий. Ваша ссылка:

<a id="msg_tab" href="" class="tab msgtab">MESSAGES</a>

Нет href означает, что если вы нажмете на такую ​​ссылку, вы вернетесь назад на ту же страницу. Ваш обработчик событий должен быть:

$("#msg_tab").bind("click",function(){
  var html=".....";
  $("#sidebar1").html(html);
  return false;
});

return false - остановить распространение события, которое в настоящее время вызывает обновление страницы. Вот почему вы не видите обновления.

Answer 2

Вы добавляете обработчик кликов к гиперссылке, которая указывает на вашу текущую страницу.
После выполнения обработчика щелчков гиперссылка нажимается, и страница перезагружается, возвращая ее в исходное состояние.

Вам нужно добавить return false; в обработчик click, чтобы предотвратить перезагрузку страницы.
В качестве альтернативы вы можете изменить атрибут href на href="#".

Answer 3

U также можно использовать

$("#sidebar1").html("");

, чтобы очистить содержимое любого конкретного div ...