(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 클릭에 대해 두 이벤트가 발생합니다.

이제 div3을 클릭하여 이벤트를 바인딩 해제하면 .off 메소드가 이전에 첨부 된 모든 이벤트를 div1에 바인딩 해제합니다. 내가 div3을 클릭하면

내 질문

나는 단지 하나의 이벤트 (의 두 번째 이벤트를 가정 해 봅시다) (JQuery와 .off를 사용하여) 바인딩 해제 할 수있는 방법 div1에서입니다.

나는 어떤 방법이라도 응용 프로그램의 어느 부분에서든 .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>