JQuery - clicking on one element starts another

Question

I have this jQuery file, but it vote_up click handlercontinues to conflict with vote_down click handler, when I click the vote_down element, it changes the vote_up element:

jQuery script:

$(document).ready(function () {
    $("a.vote_up").click(function () {
        //get the id
        var the_id = this.id.split('_').pop();
        //the main ajax request
        $.ajax({
            type: "POST",
            data: "action=vote_up&id=" + the_id,
            url: "ajax/votes.php",
            success: function (msg) {
                $("span.vote_count#" + the_id).html(msg).fadeIn();
                $("#" + the_id + " img").attr("src", "img/uparrowActive.png");
            }
        });
    });
});
$(document).ready(function () {
    // the vote down function
    $("a.vote_down").click(function () {
        //get the id
        var vote_id = this.id.split('_').pop();
        //the main ajax request
        $.ajax({
            type: "POST",
            data: "action=vote_down&id=" + vote_id,
            url: "ajax/votes.php",
            success: function (msg) {
                $("span.vote_count#" + vote_id).html(msg).fadeIn();
                $("#" + vote_id + " img").attr("src", "img/downarrowActive.png");
            }
        });
    });
});

html:

<a href='#' class='vote_up' id="id_23"><img src="img/uparrow.png" /></a>
<a href='#' class='vote_down' id="id_23"><img src="img/downarrow.png" /></a>

jQuery and the wokring ajax request are fine, but changing src is a problem, because when I click the vote button, it changes the vote_up image!

Answer 1

If you are looking for some strategy to focus events on the repeating piece of data, using identifiers with the number added for the link may work, but it may not be the best.

, , . , .

, :

<div id='outerContainer'>
    <div id='set_123' class='someContainer'>
        <a href='#' class='vote_up'><img src="img/uparrow.png" /></a>
        <span class='vote_count'></span>
        <a href='#' class='vote_down'><img src="img/downarrow.png" /></a>
    </div>
    <div id='set_124' class='someContainer'>
        <a href='#' class='vote_up'><img src="img/uparrow.png" /></a>
        <span class='vote_count'></span>
        <a href='#' class='vote_down'><img src="img/downarrow.png" /></a>
    </div>
    <div id='set_125' class='someContainer'>
        <a href='#' class='vote_up'><img src="img/uparrow.png" /></a>
        <span class='vote_count'></span>
        <a href='#' class='vote_down'><img src="img/downarrow.png" /></a>
    </div>
</div>

.delegate() #outerContainer, /.

- :

$(document).ready(function() {
    $('#outerContainer').delegate('.vote_up', 'click', function() {
       //get the id
        var the_id = $(this).closest('.someContainer').attr('id').split('_').pop();
        //the main ajax request
        $.ajax({
            type: "POST",
              // Make sure "this" in the callback refers to the element clicked
            context: this,
            data: "action=vote_up&id=" + the_id,
            url: "ajax/votes.php",
            success: function (msg) {
                  // Not sure where your vote_count is. See the HTML for my placement
                $(this).siblings("span.vote_count").html(msg).fadeIn();
                  // get the child <img> and set its src
                $(this).children("img").attr("src", "img/uparrowActive.png");
            }
        });
    });
    $('#outerContainer').delegate('.vote_down', 'click', function() {
       //get the id
        var the_id = $(this).closest('.someContainer').attr('id').split('_').pop();
        //the main ajax request
        $.ajax({
            type: "POST",
              // Make sure "this" in the callback refers to the element clicked
            context: this,
            data: "action=vote_down&id=" + the_id,
            url: "ajax/votes.php",
            success: function (msg) {
                  // Not sure where your vote_count is. See the HTML for my placement
                $(this).siblings("span.vote_count").html(msg).fadeIn();
                  // get the child <img> and set its src
                $(this).children("img").attr("src", "img/downarrowActive.png");
            }
        });
    });
});

, .someContainer. , , .split().pop().

AJAX context: $.ajax(), this .

.siblings(), .vote_count, .html().

, .children(), img, src.

. HTML.

Answer 2

"id" .