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

我有一个名为instrument的div作为类名当我触发第一个jQuery函数时，我需要将该类名更改为inst 然后当我按下新添加的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");
    });

更改类名并调用新函数

2 个答案: