更改類名稱並調用一個新函數

Question

我需要刪除一個類並在jQuery中將其名稱更改爲另一個名稱，並且需要運行新類名的方法。

我的div在這裏

<!-- 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稱爲樂器類名 我需要的那類名稱更改爲研究所，發生火災時我的第一個jQuery函數 然後當我按下新增它需要打個招呼。

<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 1

你應該解除綁定，當它被觸發第一個事件處理程序，否則將被再次觸發，當你點擊元素。您可以使用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"); 
    }); 
}); 

Answer 2

使用事件代表團，以便選擇動態添加的元素嘗試：

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