jQuery/AJAX函数只执行一次

我想使用jQuery和AJAX提交和处理表单。该表单适用于类似/不同的按钮。当用户点击/不像按钮时，表单被提交（我在我的JSFIDDLE中注释了我的AJAX），然后表单变为相反，并且按钮文本被更改。但是，由于某种原因，表单和按钮只会更改一次。我究竟做错了什么？我希望用户能够像他们那样打，然后不一样，如果他们愿意，他们也可以再次打。jQuery/AJAX函数只执行一次

我的代码：

$(".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; 

});

来源

2013-07-09 user2320500

您使用的是这种形式的原因吗？ – Cobby

我该怎么办？ – user2320500

请参阅下面的答案。 – Cobby

要绑定提交事件，因为你正在改变类的存在形式是不存在的形式。正确的做法是：

$("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; 

});

我建议给表单一个特定的属性，以便您可以更直接地选择它。

来源

2013-07-09 02:53:31 kalley

正是我在写什么:)你比我快。 – hazzik

这是因为您的代码运行时没有'.unlike-form'。

jQuery不会主动检查您的DOM是否发生更改，并重新运行lopp或其他任何代码。你的代码是静态的，所以当它被执行并试图绑定事件时，它会发现一个.like-form并绑定了一个点击事件。没有'.unlike-form'。

此外，你的代码改变类FO的元素，所以即使你拿到了绑定代码的工作，因为它仍然是相同的表单元素，它仍然连接到它原来的.like-form事件代码。

国际海事组织，你的整个做法是有点关闭。我建议更多的东西像这样的（未测试）：

<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属性，然后在页面末尾运行一次。

来源

2013-07-09 02:57:20 Cobby

你应该使用switchClass（）。

switchClass(removeClassName, addClassName).

编号：http://api.jqueryui.com/switchClass/

，并更改提交点击功能，一切都将正常工作..

来源

2013-07-10 08:12:18

jQuery/AJAX函数只执行一次

回答

相关问题