Question

I’ve got a bunch of buttons nested within div tags in my html

<div class="button-wrapper">
    <button class="button-class">Click here</button>
</div>
<div class="button-wrapper">
    <button class="button-class">Click here</button>
</div>
...

Clicking on the button posts some data using JQuery and returns some HTML through a .ajax success function. I’m trying to replace the content of the div for each button that is clicked, but for some reason my JQuery selector doesn’t seem to be working.

I’m trying the following within my success function:

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

I know that the data is being posted successfully and that the success function is working. What’s weird is that the following works:

$(".button-wrapper").html(data);

but obviously this adds the HTML to every div, not just the one for the button that is clicked.

Does anyone know where I might be going wrong here?

Answer 1

In jQuery ‘this’ is commonly overwritten within a callback. The workaround is to reference this using another variable:

var _this = this; //or var $_this = this;
$(_this).parent().html(data);