競合イベント処理jQueryの

Question

で私はこのような<div>ている：私はすでに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> 

を持っている：

$("#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

親divの上でクリックイベントを発火から削除ボタンにクリックイベントを引き起こすことのdivを削除するremoveメソッドを使用して、stopPropagation：

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

を