どのようにして（Jquery）特定のイベントをバインドまたはアンバインドするかを指定します。

Question

特定のイベントをバインドまたはアンバインドする方法を知りたいと思います。

$(document).ready(function(){ 
 
    $("#div2").on("click",function(){ 
 
    $("#div1").on("click",function(){ 
 
     console.log("binded from div2"); 
 
    }); 
 
    }); 
 
    $("#div1").on("click",function(){ 
 
    console.log("main document click binded"); 
 
\t }) 
 
    $("#div3").on("click",function(){ 
 
    $("#div1").off("click"); 
 
    }); 
 
})

#div1{ 
 
    height:100px; 
 
    width:100px; 
 
    background-color:black; 
 
    color:white; 
 
} 
 

 
#div2{ 
 
    height:100px; 
 
    width:100px; 
 
    background-color:white; 
 
    border:1px solid black; 
 
} 
 

 
#div3{ 
 
    height:100px; 
 
    width:100px; 
 
    background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="div1">div1 
 
</div> 
 
<br/><br/><br/> 
 

 
<div id="div2">div2 
 
</div> 
 
<br/><br/><br/> 
 

 
<div id="div3">off 
 
</div>

付属のコードスニペットを確認してください。

私は最初にdiv1にイベントをバインドしました。 次にdiv2をクリックすると別のイベントを同じdivにバインドしました。ここでdiv1のクリックに対して2つのイベントが発生します。

ここで、イベントをバインド解除するdiv3をクリックすると、以前にアタッチされたすべてのイベントがdiv1にアンバインドされます。私はDIV3をクリックしたときに

私の質問は、私は（jQueryの.offを使用して）バインド解除するにはどうすればよい

DIV1からわずか1つのイベント（のは2番目のイベントを言わせて）です。

.onまたは.offという名前のメソッドは、アプリケーションのどの部分からでも指定できますが、正確に適用する方法はわかりません。

Answer 1

onとoffの機能に/から関数を渡すことで、個々のイベントを追加/削除できます。この例では

赤 <div>（あなたが白 <div>をクリックしたときには、追加すなわち1）は、第2のイベントハンドラを削除します：

$(document).ready(function() { 
 
    $("#div2").on("click", function() { 
 
    $("#div1").on("click", foo2); 
 
    }); 
 
    $("#div1").on("click", foo1) 
 
    $("#div3").on("click", function() { 
 
    // turn off the handler for foo2 but keep the handler for foo1 
 
    $("#div1").off("click", foo2); 
 
    }); 
 
}) 
 

 
function foo1() { 
 
    console.log('1st event happened'); 
 
} 
 

 
function foo2() { 
 
    console.log('2nd event happened'); 
 
}

#div1 { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: black; 
 
    color: white; 
 
} 
 
#div2 { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: white; 
 
    border: 1px solid black; 
 
} 
 
#div3 { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="div1">div1 
 
</div> 
 
<br/> 
 
<br/> 
 
<br/> 
 

 
<div id="div2">div2 
 
</div> 
 
<br/> 
 
<br/> 
 
<br/> 
 

 
<div id="div3">off 
 
</div>