.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方法鏈接 。 您不需要多次選擇元素來添加方法