jQuery를 사용하여 폼에 클래스 추가 및 제거

Question

두 영역이 있습니다. 한 영역은 사용 가능 항목이고 다른 영역은 사용할 수없는 항목입니다. 사용자는 추가를 클릭하여 활성화 된 영역으로 컨텐츠를 전송할 수 있습니다.

문제는 폼 대신 클래스를 변경하여 추가하는 것이 아니라 아무 것도 발생하지 않는다는 것입니다.

문제의 jsfiddle을 만들었습니다. 한 번뿐 아니라 몇 번이나 원하는 것을 몇 번이나 앞뒤로 전환 할 수 있어야합니다.

소스에서 클래스 이름이 실제로 변경되고 있지만 내 jQuery 함수가 변경 사항을 인식하지 못하는 것 같습니다.

아래 jsfiddle - 예제를 참조하십시오 :

http://jsfiddle.net/crW9m/7/

가 여기 내 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(); 
    });  


    }); 
​ 

Answer 1

스크립트의 업데이트 된 버전을 만들었습니다. 내 유일한 변화

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){ /*...*/ }); 

Answer 2

문제는 클릭 이벤트를 바인딩하는 것은 문서 부하에서 이루어지며, 단지 변화 요소 클래스는이 바인딩에 영향을주지 것입니다. 바인딩 대신 jQuery live() 메서드를 사용하십시오.) (http://jsfiddle.net/crW9m/8/