Question

What is wrong with this jquery script? It doesn’t seem to be functioning properly: there are no syntax errors (I checked).

     $(document).ready(function() {
        $('.statuses').delegate('.vote_up', '.vote_down', 'click', function(e) {

            e.preventDefault();
//get the ide
var the_id = $(this).closest('.message').attr('id').split('_').pop();

            var parent = $(this).closest('.statuses'),
                vote = (($(this).hasClass("vote_up")) ? "up" : "down");

            if(parent.data("vote") == vote) {
                return true; // If already voted up, do nothing, if already voted down, do nothing...
            }

            if(vote == "down") { // Vote down
                src = "img/uparrow.png";
                action = "vote_down";
            }
            else if(vote == "up") { // Vote up
                src = "img/uparrowActive.png";
                action = "vote_up";
            }

            // Setting current vote (up or down)
            // So next time you toggle, we have the trace of the previous vote (up/down)
            // And authorise only do the opposite
            parent.data("vote", vote);

                    $.ajax({
                        context: this,
                        type: "POST",
                          // Make sure "this" in the callback refers to the element clicked

                        data: "action=" + action + "&id=" + the_id,
                        url: "ajax/votes.php",
                        success: function (msg) {

                            $(this).siblings("span.vote_count").html(msg).fadeIn();
                              // get the child <img> and set its src
                            $(this).children("img").attr("src", src);
                        }
                    });
                });
           });

html:

<ul class="statuses">
<li id="set_41" class="message">
 <span class="vote_count">0</span>
 <a href="#" class="vote_up"><img src="img/uparrow.png" /></a>

Answer 1

You’re passing too many arguments to .delegate().

I assume you’re trying to do:

$('.statuses').delegate('.vote_up,.vote_down', 'click', func...

---

$(document).ready(function() {
    $('.statuses').delegate('.vote_up,.vote_down', 'click', function(e) {
        e.preventDefault();
        var the_id = this.parentNode.id.split('_')[1];  // get the id
        var $img = $(this).children('img');      // get the child image
        var src = $img.attr('src');      // get the src of the image
         // it has been clicked if the src contains the word "Active"
        var hasBeenClicked = src.indexOf('Active') > -1;
        var action = this.className;  // action is the same as the className
          // if it has been clicked, reverse the action
        if( hasBeenClicked ) {
            action = ( action === 'vote_up' ) ? 'vote_down' : 'vote_up';
        }
        $.ajax({
            context: this,
            type: "POST",
            data: "action=" + action + "&id=" + the_id,
            url: "ajax/votes.php",
            success: function(msg) {

                $(this).siblings("span.vote_count").html(msg).fadeIn();
                    // set the src of the image
                    // If it has been clicked, remove the word "Active"
                    // If not, add "Active"
                $img.attr("src", function(i,src) {
                    return ( hasBeenClicked ) ? src.replace('Active', '') : src.replace('.png', 'Active.png');
                });
            }
        });
    });
});​