jQuery disable anchor tag and select child element?

I'm having much trouble figuring this out, so maybe someone can help me.

This is my html:

<p>
post content
<span><a href="#" class="voteUp">I approve this message <span>${post.upvotes}</span></a></span>
</p>

<p>
post #2 co开发者_StackOverflow中文版ntent
<span><a href="#" class="voteUp">I approve this message <span>${post.upvotes}</span></a></span>
</p>

And my JS:

$(".voteUp").click(function(){
    $.post(voteAction({postid: this.id, type: 'up'}), function(data){
        $("a span").html(data);
    });
});

Basically what I want to do is change the value of the inner span with the value that data contains. The code above does work, but it is changing the content of every span, and not only the child of the clicked anchor.

Another thing I want to do is disable the anchor tag once a vote has been submitted.

Any ideas how to do this?

---

Try:

$(".voteUp").click(function(){
    var voteUp = $(this);
    if(voteUp.hasClass('disabled'){
        // don't do anything, because it's disabled
    } else{
        $.post(voteAction({postid: this.id, type: 'up'}), function(data){
            voteUp
                .addClass('disabled') // add a class, which you can check on a click event fired
                .find("span")
                .html(data);
        });
    }
});

---

Try this:

$(".voteUp").click(function(){
    $.post(voteAction({postid: this.id, type: 'up'}), function(data){
        // Replace <span> that's a child of this:
        $('span', this).html(data);
        // Unbind click event from anchor:
        $(this).unbind('click');
    });
});

If you want to remove the anchor tag instead of unbinding the click event, do:

$(this).parent().html($(this).html());

---

Keep in mind that your callback function from $.post is asynchronous, so you lose your context without proper framing. So, this means that your $('a span') searches the entire DOM, hence why it was replacing everything.

EDIT: Alright, Shef is splitting hairs but made me realize that using unbind (or shef's method) will still not return false on the click and as such will have a nice "kick to the top" effect when you click on the <a href="#">. This code has been updated to fix that.

$("a.voteUp").click(function(){
    //Set a local variable to the anchor that was clicked on for future use
    var $this = $(this);
    $.post(voteAction({postid: this.id, type: 'up'}), function(data){
        $this.find("span").html(data);

        //Unbind this "voteUp" button.  This will remove the click handler and apply a class of "disabled"
        $this.unbind('click').click(function() { return false }).addClass('disabled');
    });
    return false;
});

Now, in your CSS:

.disabled { color: #999; }

This will make the text in elements that are "disabled" be gray.

---

Try

$(document).ready(function() {

    $(".voteUp").click(function() {

        $.post(voteAction({postid: this.id, type: 'up'}), function(data) {

            $(this).children("span").html(data);

        });

        $(this).unbind('click');
    });
});