jquery - jQuery 中冲突的事件处理

Question

我有一个<div>像这样:

<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>

我已经有一个 jQuery 函数:

$("#fb_contentarea_col1down21 div").live("click", function(){
  // some stuff to change the properties of the Field,
  // like changing the field name, size.
  return false;
});

我有一个<div>里面有一个“删除”图像按钮，我想在单击“button-delete1”时删除它。我尝试过:

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

现在我的两个功能发生冲突。当我单击“button-delete1 ”时，我的函数 #1 被执行并显示错误。

Answer 1

使用remove删除 div 的方法，以及 stopPropagation触发父 div 上的单击事件导致删除按钮上的单击事件:

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