Изменение имени класса и вызов новой функции

Question

Мне нужно удалить класс и изменить его имя на другое имя в 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 называемых инструментов в качестве имени класса мне нужно, чтобы изменить это имя класса инст, когда огнь функция моего первого JQuery тогда, когда я нажимаю новый добавил div Ему нужно сказать привет.

<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"); 
    });