두 번째 .click() 함수가 작동하지 않습니다.

Question

첫 번째 .click 함수는 컨테이너에 요소 (div)를 추가하고 두 번째 .click 함수는 컨테이너에서 요소를 제거하는 데 사용됩니다. 컨테이너에는 처음에는 요소가 없습니다.

$(document).ready(function(){ 
    $(".class1").click(function(){ 
     //Code for adding element to the container and 
     // removing class1 from it and adding class2 

    }); 

    $(".class2").click(function(){ 
     alert("hi"); //Even the alert is not displayed 
     $(this).fadeOut(100);  
    }); 
}); 

작동하지 않습니다 클릭하여 기능을 제거하는 요소가 컨테이너에 페이지가로드되기 전에 이미 존재하는 경우 그러나, 그것은 작동합니다. 이유가 무엇입니까? document.ready 함수 때문입니까? 솔루션?

Answer 1

그 특정 순간에 ; 예 : 없음.

대신에 다음과 같은 이벤트 위임을 사용해야합니다.

$(document).on('click', '.class2', function() { 
    alert('hi'); 
    $(this).fadeOut(100); 
}); 

은 이벤트 위임을 사용하는 .class2 요소에 클릭을 수신 (항상 존재) document에 이벤트를 바인딩으로이 작동합니다. 자세한 내용은 on() 설명서를 참조하십시오.

Answer 2

.class2을 클릭하여 코드를 추가하려고하면 이해가되므로 아직 만들어지지 않았습니다. 이 같은 .class2 요소를 만든 후에 시도는, 클릭 이벤트를 추가 :

당신이 .class2 요소의 클릭 핸들러를 추가 할 때, 당신은 단지 클래스를 요소에 이벤트를 추가하고 있기 때문이다

$(document).ready(function(){ 
    $(".class1").click(function(){ 
      //Code for adding element to the container and removing class1 from it and adding class2 

     $(".class2").click(function(){ 
      alert("hi");   //Even the alert is not displayed 
      $(this).fadeOut(100); 

     }); 
    }); 
}); 

Answer 3

변경 후 class 요소가 동적으로 처리되기 때문에 두 클래스 모두에 대한 위임 이벤트 핸들러를 사용합니다 (둘 사이를 전환하거나 다시 class1으로 돌아 가지 않으면 두 번째 것이 충분합니다).

$("#container").on("click", ".class1", function(){ 

}); 

$("#container").on("click", ".class2", function(){ 

}); 

여기 #container 그 클래스의 부모를 말합니다, 당신은 다른 뭔가가있을 수 있습니다.

Answer 4

기능을 정교화 할 때 이벤트가없는 요소에서 이벤트를 전송할 수 없습니다. 그러나,이 같은 래퍼 주변 요소 (DIV) "클래스 1"과 "Class2의"를 만들 수 있습니다 : 나는 그것이 어떤 요소 모르기 때문에

<div id="class1_wrapper"> 
    <span class="class1"> 
</div> 

나는, 클래스 1은 "범위"를 사용했다. 그런 다음, 대신 클릭 이벤트, 당신은 "()에"사용할 수 있습니다

$("#class1_wrapper").on("click", ".class1", function() 
{ 
    //Code for adding element to the container and removing class1 from it and adding class2 
}); 

이 방법을, 클래스 1이 아닌 경우에도 (같은이 Class2의를 위해 수행 할 수 있습니다), 클릭 이벤트가

를 실행합니다