한 번만 실행되는 jQuery/AJAX 함수

Question

jQuery와 AJAX를 사용하여 양식을 제출하고 처리하려고합니다. 양식은 좋아요/다른 버튼을위한 것입니다. 사용자가 좋아요/다른 단추를 클릭하면 양식이 제출되고 (내 AJAX를 내 JSFIDDLE에 주석 처리했습니다) 양식이 반대쪽으로 변경되고 단추 텍스트가 변경됩니다. 그러나 어떤 이유로 양식과 버튼이 한 번만 변경됩니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 나는 사용자가 좋아할 수 있고 싶지 않다면, 좋아하지 않을 때 다시 좋아할 수 있기를 바랍니다.

내 코드 :

$(".like-form").submit(function() { 

    var dataString = $(this).serialize(); 
    var $this = $(this); 

    //Ajax that submits the form to like.php 

    $this.attr('class', 'unlike-form'); 
    $this.find('.like-button').html('Unlike'); 

    return false; 

}); 

$(".unlike-form").submit(function() { 

    var dataString = $(this).serialize(); 
    var $this = $(this); 

    //Ajax that submits the form to unlike.php 

    $this.attr('class', 'like-form'); 
    $this.find('.like-button').html('Like'); 

    return false; 

}); 

Answer 1

당신은 당신이 기존 형태의 클래스를 변경하기 때문에 존재하지 않는 형식으로 이벤트를 제출 바인딩하고 있습니다. 이렇게하는 올바른 방법은 다음과 같습니다.

$("form").submit(function() { 

    var $this = $(this); 
    var isLiked = $this.hasClass('unlike-form'); 
    var dataString = $this.serialize(); 

    if (isLiked) { 
     //Ajax that submits the form to unlike.php 
    } else { 
     //Ajax that submits the form to like.php 
    } 

    $this.toggleClass('like-form unlike-form'); 
    $this.find('.like-button').html(isLiked ? 'Like' : 'Unlike'); 

    return false; 

}); 

양식을 더 직접 선택할 수 있도록 양식에 제공하는 것이 좋습니다.

Answer 2

코드가 실행될 때 '.unlike-form'이 없기 때문입니다.

jQuery는 변경 사항이 있는지 DOM을 확인하고 lopp 등의 코드를 다시 실행하지 않습니다. 코드가 정적이므로 코드가 실행될 때 .like-form을 찾아서 클릭 이벤트를 바인딩합니다. .unlike-form은 없습니다. 또한

, 당신은 코드 요소 FO 클래스를 변화하고, 그래서 여전히 같은 폼 요소이기 때문에 당신이있어 경우에도 바인딩 코드는 여전히가 부착 된 원래 .like-form 이벤트 코드가 , 일 .

IMO, 귀하의 전체 접근 방식은 조금 벗어났습니다.

<button class="like-button is-unlike" data-like-button data-user-id="1" data-post-id="2">Like</button> 

<script> 
    var $likeButtons = $('[data-like-button]'); 

    $likeButtons.on('click', function() { 
    var $likeButton = $(this); 
    var isLiked = $likeButton.hasClass('is-liked'); 

    var data = { 
     mode: isLike ? 'like' : 'unlike' 
     userId: $likeButton.data('user-id'), 
     postId: $likeButton.data('post-id') 
    } 

    // do async request here 

    if (isLiked) { 
     $likeButton 
     .removeClass('is-liked') 
     .addClass('is-unliked') 
     .text('Unlike'); 
    } else { 
     $likeButton 
     .removeClass('is-unliked') 
     .addClass('is-liked') 
     .text('Like'); 
    } 

    return false; 
    }); 
</script> 

편집 : 만들어 내 추천 코드 재사용이 같은 뭔가 더 (안 테스트)를 권 해드립니다. 요소에 data-like-button 속성을 추가 한 다음 페이지 끝에서 번 스크립트 을 한 번만 실행하면됩니다.

Answer 3

switchClass()를 사용해야합니다.

switchClass(removeClassName, addClassName). 

참조 : http://api.jqueryui.com/switchClass/

그리고 변경 ... 기능과 모든 것이 잘 작동합니다 클릭