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是停止事件传播，当前正在强制页面刷新。这就是你没有看到更新的原因。

Answer 2

您正在为指向当前页面的超链接添加点击处理程序单击处理程序执行后，单击超链接并重新加载页面，将其重置为原始状态。

您需要将return false;添加到click处理程序，以防止重新加载该页面或者，您可以将href属性更改为href="#"。

Answer 3

U也可以使用

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

清空任何特定div的内容...

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

3 个答案: