2011-08-08 10 views
2

divに関連付けられたclickイベントが関連付けられている要素があります。両方のクリックイベントは、両方とも同時に発生する以外は正常に動作します。アンバインド後にJqueryのリバインドクリック

私は親のdivのクリックイベントを無効にするには、内側の要素をクリックしてください:

マイHTML(@foreach MVCレイザーループ内):

<td class="tdfuncLangSignOff tdNotChecked [email protected](item.Language.Name)" title="@(item.SignedOffStatus)"> 
    <div class="addComment"></div> 
    @Html.Hidden("funcSignOffId", item.Id) 
</td> 

私のjqueryの:

var handler = function() { 
    var thisTD = $(this); 
    var signOffId = thisTD.parent().children("input#funcSignOffId").val(); 
    console.log("parent div click"); 
} 

    $(".tdfuncLangSignOff").click(handler); 

$(".addComment").click(function() { 
    $(this).parent().unbind("click") 
    console.log("nested div click"); 
    //$(this).parent().click(handler) 
}); 

私はハンドラのアイデアを見つけましたthis thread

私はaddComment divをクリックして、親のdivをクリックしないようにしました。しかし、明らかに再結合は起こりません。 addCommentのclick機能で$(this).parent().click(handler)のコメントを外すと、クリックトリガーが表示され、コンソールに「parent div click」と表示されます。

すぐにトリガーすることなく、親divのクリックを再バインドするにはどうすればよいですか?

答えて

5

私が正しくあなたを理解していれば: イベントの伝播を止めるために、するevent.stopPropagation()を使用します。

例:

<div id="a"> 
    Outer 
    <div id="b">Inner</div> 
<div> 

とjQueryで:

$("#a").click(function(event) {alert("a");}); 
$("#b").click(function(event) {alert("b"); event.stopPropagation();}); 

あなたはもっとここで読むことができます。 http://api.jquery.com/event.stopPropagation/

+0

Doh ...私はstopPropagationを "ライブ"イベントを持った他の多くの関数に使っています。ありがとうございました! – LanFeusT

+0

@LanFeusT:喜んで助けてください。 – Naor

0

あなたは試すことができます:

$(this).parent().bind('click'); 
+0

これは動作しません。バインドを解除すると、要素に設定したすべてが失われます。だから、私は 'クリック(ハンドラ)'を持っていたのです – LanFeusT

0

を私はあなたにクリックハンドラを再バインドしているので、理由がある疑いがあります子クリックイベントが発生した場合、そのイベントは次のレベル(親)に伝播します。

私が何か他のものを紛失していない限り、伝播を停止するナーアの助言があなたの目的に役立つはずです。

+0

うん、それはトリックを作った:)私はイベントがバインド解除と再バインド後に伝播するとは思わなかった。 – LanFeusT

関連する問題