使用Jquery"empty"删除div的内容不起作用

Question

我试图删除特定div的内容,这些内容基本上是列表项和标题,使用jquery为空,以便我可以替换为新内容.当我运行代码时会发生什么,整个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>

另一个问题是,如何在javascript中编写多行html代码字符串,以便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是停止事件传播,这是目前强制刷新页面.这就是为什么你没有看到更新.