更改类名并调用新函数

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

我有一个名为 Instruments 的div 作为类名我需要将该类名更改为 inst，当触发我的第一个 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 方法自动取消绑定事件处理程序。

只需将另一个事件处理程序绑定到第一个事件处理程序中的元素：

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