Как отключить (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 изначально. Затем я привязываю другое событие к тому же div при нажатии на div2, поэтому теперь для div1 нажмите два события.

Теперь, когда я нажимаю на div3, чтобы отменить событие, метод .off отвяжет все ранее вложенные события в div1.

Мой Вопрос

Как отвязать (с помощью Jquery .off) только одно событие (скажем, второе событие) из див1, когда я нажимаю div3.

Я слышал, что мы можем назвать любой метод .on или .off из любой части приложения, но не уверены, как правильно его применять.

Answer 1

Вы можете добавлять/удалять отдельные события, передавая функции в/из функций on и off.

В этом примере красный <div> удалит обработчик второго события (то есть тот, который вы добавили, когда вы нажимаете на белом <div>):

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