Insert HTML into a div using jQuery

Question

I have a bunch of buttons nested in 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> ... 

By clicking the button, you can send some data using jQuery and return the HTML code through the .ajax success function. I am trying to replace the contents of a div for every button I clicked, but for some reason my jQuery selector does not seem to work.

I am trying to execute the following function:

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

I know that data is sent successfully and that the success function works. What is strange is that the following works:

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

but obviously this adds HTML for each div, and not just for the button that is clicked.

Does anyone know where I can go wrong here?

Answer 1

In jQuery, 'this' is usually overwritten in a callback. The workaround is to reference it using another variable:

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

Answer 2

It will be useful for you ....

 $("button").click(function(){ $("div").html("Hello <b>world</b>!"); }); 

Answer 3

The problem is that in your callback this no longer a button. Try the following:

 $(".button-wrapper").click(function(){ var that=this; $.ajax( // ... success: function(data){ $(that).parent().html(data); } ); }); 

Answer 4

I would recommend using firebug to tune your selector.

Other than this, you cannot set unique identifiers for each div?

Answer 5

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> 

JS:

  $.ajax({ //.. success: function(){ $(".button-class").click(function(){ $(this).parent().html("Dynamic Html"); }); } }); 

Answer 6

You should know that you need to download the success function log, for example: setInterval(myFunction,2500);