Question

I have this vote system on a wordpress installation everything works fine if I have only one post if I have more, the AJAX posts only for the first form.

So every post has a HTML form:

<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>

And here’s the 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; 
    });

});

So I want this to work, only on the form that have been submited. How do I achieve that?

.each() will work?

Answer 1

If I am understanding this correctly(if not just ignore me lol)…

You can use the .live function to hold a reference to every submit button on the page…

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

      //do your ajax calls here...

});

this will essentially create a click event for each vote up button…