如何仅删除在 jquery 中使用 append() 附加的标签答案

【问题标题】：how to remove only tags appended using append() in jquery如何仅删除在 jquery 中使用 append() 附加的标签
【发布时间】：2010-11-16 06:45:32
【问题描述】：

我有一个 div 会在鼠标悬停时弹出，我正在使用 html() 插入一些内容。而且我希望代码的某些部分保持不变。

<div id="pop_div" ><span>X</span></div>


$("#team_div > ul img").bind('mouseenter',function(){
  $("#pop_div").html('<img src="' + img + '"/>' + content );
 });

onclick 我隐藏了 div。

$('#pop_div span').click(function(){
  $("#pop_div").hide();
});

我的问题是，我不能使用下面的代码，因为 jquery 没有为该标签分配任何事件

$("#pop_div").html('<span>X</span><img src="' + img + '"/>' + content );

（我不能使用 livequery 插件）

我很欣赏你的 cmets。

【问题讨论】：

标签： jquery tags append

【解决方案1】：

CMS 是对的。另外，从 jQuery 1.3 开始，您可以绑定您的事件 with the live function，这会将事件绑定到所有当前和未来的元素。

$('#team_div > ul img').live('mouseenter',function(){
  $('#pop_div img').attr('src', img); // set the image source
  $('#pop_div #content').html(content); // display the content
});

【讨论】：

【解决方案2】：

您正在替换 #pop_div 的全部内容，当您插入 HTML 代码时，正在创建新的 DOM 元素，这就是未绑定事件的原因。

span 元素从 DOM 中移除，附加到它的事件不再起作用。

我认为您不需要替换该 div 的所有内容，您可以像这样构造您的 div：

<div id="pop_div" >
  <span>X</span>
  <img/>
  <div id="content"></div>
</div>

在你的鼠标输入：

$('#team_div > ul img').bind('mouseenter',function(){
  $('#pop_div img').attr('src', img); // set the image source
  $('#pop_div #content').html(content); // display the content
});

图片来源改变，content变量插入'#content' div。

您的点击处理程序将保持原样，因为 span 元素不受影响。

【讨论】：