使用 $.ajax 发布 jQuery 表单

Question

我在 WordPress 安装上有这个投票系统，如果我只有一个帖子，那么一切正常，如果我有更多帖子，AJAX 帖子仅适用于第一个表单。

所以每个帖子都有一个 HTML 表单:

<form method="post" id="vote_<?php the_ID(); ?>" class="vote" name="vote">
    <input type="hidden" id="vote_post_id" name="vote_post_id" value="<?php the_ID(); ?>" />
    <input type="hidden" id="vote_count" name="vote_count" value="1" />
    <span class="votes_count"><?php echo get_post_meta($post->ID, 'votes', true); ?></span>
    <input type="submit" name="vote_up" class="vote_up" value="+1" />
</form>

这是 jQuery:

$(function() {  
    $('form.vote').submit(function() {
        var url = 'http://bla-bla.com/lib/';
            post_id = $('input#vote_post_id').attr('value');
            count = $('input#vote_count').attr('value');
            form_id = $('form.vote').attr('id');    
            cast_vote = 'post_id=' + post_id + '&count=' + count;
            original_count = $('span.votes_count').html();
            new_value = parseInt(original_count) + 1;

        //alert (cast_vote);return false;
        $.ajax({
            type: 'POST',
            url: url + 'cast.php',
            cache: false,
            timeout: 10000,
            data: cast_vote,
            success: function(data){
                $('form.vote').find('span.votes_count').fadeIn(1500, function() {
                    $(this).html(new_value);
                }); 
                $('form.vote').removeClass('vote').addClass('user_voted disabled');
            }
        });
        return false; 
    });

});

所以我希望这仅在已提交的表单上起作用。我该如何实现这一目标？

.each() 可以工作吗？

Answer 1

如果我理解正确(如果不只是忽略我哈哈)...

您可以使用 .live 函数来保存对页面上每个提交按钮的引用...

$('.vote-up').live('click', function(){

      //do your ajax calls here...

});

这实际上将为每个投票按钮创建一个点击事件...