JQuery, how to access click object after ajax call?

Question

this seems like it should be straightforward, but I'm having trouble getting it to work.

I have a .click bind to many buttons of a certain class. When that button is clicked, it passes its id to a $.post call for processing.

When the $.post call returns successfully, I'd like to remove the button and add a message to the container, but I can't seem to even access the button at that point.

Here is the .click bind:

$('.button').click(function() {
    $.post('process.php', {
        action: 'checkit'
    },
    function(result) {
        if (result == 'win') {
            // Access the button that was pressed with jQuery
        }
        else {
            alert("fail");
        }
    });
});

I've tried, $(this), this, and also setting a variable like var trigger=this as I enter the initial click function, but none of these are working. I get undefined, or it points to the actual JQuery object, not the button.

Does anyone have any insight into how I can access the button that was clicked at that point, using a jQuery wrapper, essentially something like $( triggered button ).html() so that I can manipulate the correct button?

Thanks for your time.

Uku Loskit · Accepted Answer · 2011-09-20 21:17:42Z

4

$('.button').click(function() {
    var clicked = $(this);
    ....

Use a local variable for temporary storage.

answered Sep 20, 2011 at 21:17

Uku Loskit

42.2k9 gold badges97 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tejs Over a year ago

+1 - Inside the callback, you would then use clicked.remove().

jondavidjohn Over a year ago

+1 - would also reccomend the var name be $clicked so that you know it's a jQuery object.

Uku Loskit Over a year ago

@johndavidjohn: interesting suggestion, but reminds me too much of PHP :D

mreq · Accepted Answer · 2011-09-20 21:19:48Z

2

try this

$('.button').click(function() {
    var $button = $(this);
    $.post('process.php', {
        action: 'checkit'
    },
    function(result) {
        if (result == 'win') {
            $button.doStuff();
        }
        else {
            alert("fail");
        }
    });
});

answered Sep 20, 2011 at 21:19

mreq

6,5524 gold badges39 silver badges57 bronze badges

1 Comment

edeneye Over a year ago

Wow, I swear I tried that. Maybe I screwed up how it was typed, or mistakenly used "this" instead of $(this) somewhere. Thought I had tried all combinations after it failed to work. Thanks to everyone who commented.

Blender · Accepted Answer · 2011-09-20 21:18:16Z

0

It's quite easy to do:

$(this).foo('bar');

answered Sep 20, 2011 at 21:18

Blender

300k55 gold badges462 silver badges511 bronze badges

Comments

NiematojakTomasz · Accepted Answer · 2011-09-20 21:20:19Z

0

Is

$('.button').click(function() {
    $.post('process.php', {
        action: 'checkit'
    },
    function(result) {
        if (result == 'win') {
            $(this).html('something');
        }
        else {
            alert("fail");
        }
    }.bind(this));
});

working?

answered Sep 20, 2011 at 21:20

NiematojakTomasz

2,48520 silver badges23 bronze badges

Comments

Paul Grime · Accepted Answer · 2011-09-20 21:25:44Z

0

jsfiddle example of what you are attempting. Click on the text. Just keep a local variable.

answered Sep 20, 2011 at 21:25

Paul Grime

15.1k4 gold badges39 silver badges59 bronze badges

Collectives™ on Stack Overflow

JQuery, how to access click object after ajax call?

5 Answers 5

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related