使用jQuery添加和刪除窗體上的類

我有兩個區域，一個區域用於啓用項目，另一個用於禁用項目。用戶可以點擊添加將內容發送到啓用區域。使用jQuery添加和刪除窗體上的類

問題是，當我改變窗體的類，使其刪除而不是添加，沒有任何反應。

我已經做了一個jsfiddle的問題。你應該能夠多次來回切換，而不僅僅是一次。

你可以在源文件中看到類名實際上正在改變，但似乎我的jQuery函數不能識別這個改變。

請參閱以下的jsfiddle，例如：

這裏是我的HTML標記：

<div class="added"> 
<form class="add"> 
<h3>One item </h3> 
<input type="submit" value="Add" /> 
</form> 
    </div> 


<div class="deleted"> 
    <form class="delete"> 
     <h3>Second item </h3>  
     <input type="submit" value="Delete" /> 
    </form> 
    </div> 

    <div id="destination"> 
     <p>Destination for added items</p> 
    </div> 
    <div id="destination2"> 
     <p>Destination for deleted items</p> 
    </div>

，這裏是jQuery代碼與它去：

$(document).ready(function() { 
    $(".add").click(function(event){ 

    var $form = $(this),   
     $inputs = $form.find("input, select, button, textarea"),    
     serializedData = $form.serialize(); 


      $form.removeClass("add").addClass("delete"); 
     $inputs.val('Delete'); 
      $form.appendTo("#destination"); 


    // prevent default posting of form 
    event.preventDefault(); 
    }); 

     $(".delete").click(function(event){   
     var $form = $(this),   
     $inputs = $form.find("input, select, button, textarea"), 

     serializedData = $form.serialize(); 


      //var submit = $form.find(":submit").hide(); 
      $form.removeClass("delete").addClass("add"); 
      $inputs.val('Add'); 
      $form.appendTo("#destination2"); 


    // prevent default posting of form 
    event.preventDefault(); 
    });  


    });

來源

2012-10-22 Albin N

你會得到答覆談論代表團，並可能討論使用'在（）'，'活（） '和'委託（）'。爲避免混淆，請告訴我們您使用的是什麼版本的jQuery :) – Archer

我使用託管的最新jQuery（1.8.2）。這只是感覺像班級變化沒有真正註冊 –

我已經創建了腳本的更新版本。

http://jsfiddle.net/crW9m/9/

我唯一的變化是使用的，而不是你的點擊事件委託（jQuery函數on）。當腳本運行時（通常在頁面加載時），click事件被添加到與選擇器匹配的實際元素。如果其他元素稍後添加，它們將不會受到該事件的影響，因爲該事件已添加到特定元素，而不是添加到常規選擇器。代表通過檢查實際事件上的匹配元素來解決此問題。

// $(".delete").click(function(event){ /*...*/ }); // Replace this with: 
$(document).on('click', '.delete', function(event){ /*...*/ }); 

// $(".add").click(function(event){ /*...*/ }); // And replace this with: 
$(document).on('click', '.add', function(event){ /*...*/ });

來源

2012-10-22 11:14:03 amcdrmtt

謝謝！所以如果你使用「on」它會再次檢查id和class？ –

準確。文檔（在我的代碼中）將接收事件，然後將事件發送到與選擇器匹配的任何元素（在本例中爲刪除和添加類）。 – amcdrmtt

-1

問題是綁定到單擊事件是在文檔加載時進行的，只是更改元素類不會影響此綁定。使用jQuery live()方法，而不是綁定。

$(".add").live("click", function(event){

代替

$(".add").click(function(event){

這裏是的jsfiddle：http://jsfiddle.net/crW9m/8/

來源

2012-10-22 11:18:56 Dexter

這可行，但live（）方法已棄用，應使用on（）。 –

使用jQuery添加和刪除窗體上的類

回答

相關問題