.click没有注册更改的类

Question

我正在尝试创建一个脚本，它将更改另一个元素的类，以避免在新类下激活脚本，但是，它没有注册脚本，脚本认为旧类仍然在那里。

<script>
$(document).ready(function(){
 $(".element1").click(function(){
  $(".element1").addClass("clicked");
  $(".element1").removeClass("element1");
});});
</script>

目前的代码高于我想要实现的目标。

Answer 1

具有类element1的元素在加载时被绑定到单击处理程序...

即使您从中删除了类，它仍然绑定到事件处理程序。
如下所示：

 $(document).ready(function(){ $(".element1").click(function(){ console.log("click"); $(".element1").addClass("clicked"); $(".element1").removeClass("element1"); }); }); 

 .element1{ color:blue; } .clicked{ color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="element1">element 1</div> 

我建议你像这样使用off() ：
感谢Dashtinejad提到.unbind()从jQuery 3.0开始被弃用......工作方式相同。

 $(document).ready(function(){ $(".element1").click(function(){ console.log("click"); $(this).off("click").addClass("clicked").removeClass("element1"); }); }); 

 .element1{ color:blue; } .clicked{ color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="element1">Element 1</div> 

并使用链接......
;）

Answer 2

试试这个，你可以通过使用特定元素的onclick来实现它。 这里的点击监听器在点击时绑定到文档中的“.element1”。

如果你只想执行一次点击事件，那么你也可以使用.one()

$(".element1").one("click",function(){ 
    <!-- your code here -->
});

 $(document).ready(function() { $(document).on("click", ".element1", function() { console.log("click"); $(".element1").addClass("clicked"); $(".element1").removeClass("element1"); }); }); 

 .element1 { width: 100px; height: 100px; background-color: green; } .clicked { width: 100px; height: 100px; background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div1" class="element1"></div> 

Answer 3

我的解决方案是： 点击div

见一（），关（），开（）; 在：

http://www.w3schools.com/jquery/event_one.asp

http://www.w3schools.com/jquery/event_on.asp

http://www.w3schools.com/jquery/event_off.asp

 $(document).ready(function(){ $(".element1").one("click", function() { console.log("is clicked"); $(".element1").addClass("clicked").removeClass("element1"); }); }); 

 .element1{ background-color:red; } .clicked{ background-color:blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="element1">hola</div> 

Answer 4

这样做

$(document).ready(function() {
  $(".element1").click(function() {
    $(this).addClass("clicked").removeClass("element1");
  });
});

注意这里使用jquery方法链接 。 您不需要多次选择元素来添加方法