jQuery中的冲突事件处理

我有这样一个

：

<div id="Field1">
  <label id="label1">Name</label><br/>
  <input type="text" data-attr="text" style="..." id="input1"/><br/>
  <label id="instr1"/>
  <div class="xfb-row-options1">
    <a class="button-delete" src="..." style="...">-</a> 
  </div>
</div>

我有一个

，里面有一个“删除”图像按钮，我想点击“

button-delete1

”删除它。我试了一下：

$("#fb_contentarea_col1down21 div div .button-delete1").live("click", function(){
  //deleting the Div Field1
  return false;
});

现在我的两个功能都冲突了。当我单击“

button-delete1

”时，我的函数#1将被执行并显示一个错误。

使用该方法删除div，并防止删除按钮上的单击事件触发父div上的单击事件：

  $("#fb_contentarea_col1down21 div div .button-delete1").live("click", function(e){
      e.stopPropagation();
      $("#Field1").remove();
      return false;
  });

使用该方法删除该div，并避免导致delete按钮上的click事件触发父div上的click事件：

  $("#fb_contentarea_col1down21 div div .button-delete1").live("click", function(e){
      e.stopPropagation();
      $("#Field1").remove();
      return false;
  });