removeclass（）和addClass（）無法使用ajax

Question

我在jquery中有addClass()和removeClass()函數的問題。 當我使用該功能時，它是替換類。 但是它沒有調用添加的類函數。 這是我的查詢

HTML代碼：

<div class="animation1 popbutton">Click Me</div>

jQuery的：

$(".animation1").click(function(){ 
   // my first function 
 });

$(".animation2").click(function(){ 
   // my second function 
 });

我的添加和刪除類函數是

$.ajax({
    url : 'file.php',
    data : postdata,
    type : 'post',
    success : function (saveresponseText)
    {
        $(".animation1").removeClass("animation1").addClass("animation2").html("Clicked");
    } 
});

如果單擊animation1 ，它將調用ajax函數，它將類名替換為animation2並且它具有一些單獨的函數。 怎么辦呢？ 請有人提出解決方案。

提前致謝，

Answer 1

當你寫

$(".animation1").click(function(){ 
   // my first function 
 });

jQuery使用此類找到元素，並向其添加clickhandler。 該函數未綁定到CSS類。

我建議您在ajax響應中添加clickhandler ，或者有2個按鈕可以隱藏/顯示

Answer 2

嘗試通過文檔添加事件處理程序：

$(document).on('click','.animation2',function(){ 
   // my second function 
});

Answer 3

問題是您的ajax沒有返回成功，請檢查控制台日志。 實際上問題不在於addClass和removeClass。 請參閱下面的示例。

在此示例中，當您單擊文本單擊我時 ，它將調用ajax請求，而ajax將導致錯誤，因此執行錯誤代碼

 $(document).ready(function() { $(".animation1").click(function() { // my first function clk() }); $(".animation2").click(function() { // my second function }); function clk() { $.ajax({ url: 'file.php', type: 'post', success: function(saveresponseText) {}, error: function(status) { $(".animation1").removeClass("animation1").addClass("animation2").html("Clicked"); } }); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="animation1 popbutton">Click Me</div>