클래스 이름 변경 및 새 함수 호출

Question

클래스를 제거하고 해당 이름을 jQuery에서 다른 이름으로 변경해야하며 새 클래스 이름에 대한 메소드를 실행해야합니다.

내 div의 내가 추가 한 새를 누르면 inst를, 화재 처음으로 jQuery를 기능 에 클래스 이름을 변경해야하는 클래스 이름 으로

<!-- Drag and Drop Area Start --> 
<div class="tile instruments"> 
<div> 

<article id="content"> 
<div id="drop-area" style="border: solid 1px; width: 100%; height: 800px;"> 
</div> 
</article> 
<!-- End --> 

내가 사업부라는 악기가 여기에 있습니다 div여보세요.

$(document).on("click", ".inst", function() { 
     alert("Hello"); 
    }); 

Answer 1

당신은이 트리거되는 첫 번째 이벤트 핸들러 바인딩을 해제해야한다, 그렇지 않으면 당신이 클릭 할 때 다시 트리거됩니다 동적으로 추가 된 요소를 선택하기 위해 이벤트 위임을 사용하는 시도가

<script type="text/javascript"> 
$(document).ready(function() {  
    $(".inst").click(function(){ 
      alert("Hello"); 
     }); 

    $(".instruments").click(function(){ 
      $("#drop-area").append($(this)); 
      console.log($(this).attr('class')); 
      $(this).removeClass("instruments"); 
      console.log($(this).attr('class')); 
      $(this).addClass("inst"); 
      console.log($(this).attr('class')); 
     }); 


}); 

</script> 

Answer 2

다시 요소. one method을 사용하면 이벤트 처리기를 자동으로 바인딩 해제 할 수 있습니다.

그냥 첫 번째 이벤트 핸들러의 요소에 다른 이벤트 처리기를 바인딩 : 내 문제는 실행 단지 첫 번째 방법, 두 가지 방법이 동시에 요구하고 당신의 방법에 대한

$(".instruments").one("click", function(){ 
    $("#drop-area").append($(this)); 
    console.log($(this).attr('class')); 
    $(this).removeClass("instruments"); 
    console.log($(this).attr('class')); 
    $(this).addClass("inst"); 
    console.log($(this).attr('class')); 
    $(this).click(function(){ 
    alert("Hello"); 
    }); 
});