Wstawianie HTML do div przy użyciu JQuery

Question

Mam kilka przycisków zagnieżdżone wewnątrz znaczników div w moim 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> 
... 

klikając na przycisk stanowisk niektórych danych przy użyciu jQuery i zwraca niektóre HTML poprzez .ajax funkcji sukcesu . Próbuję zastąpić zawartość div dla każdego klikniętego przycisku, ale z jakiegoś powodu mój selektor JQuery nie działa.

Próbuję następujących wewnątrz mojej funkcji sukcesu:

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

wiem, że dane są wysłane z powodzeniem i że funkcja sukces pracuje. Co dziwne jest to, że następujących prac:

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

ale oczywiście to dodaje HTML do każdego div, a nie tylko jeden dla przycisku, który kliknął.

Czy ktoś wie, gdzie może się nie udać?

Answer 1

W jQuery "ten" jest często nadpisywany w ramach wywołania zwrotnego. Rozwiązaniem jest odniesienie do tej zmiennej za pomocą innej zmiennej:

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

Answer 2

Zalecam użycie firebug do dostrojenia selektora.

Czy nie możesz ustawić unikalnych identyfikatorów dla każdego elementu div?

Answer 3

Problem polega na tym, że w twoim oddzwonieniu this nie jest już przyciskiem. Spróbuj tego:

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

Answer 4

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 5

Powinieneś wiedzieć, że trzeba załadować rejestr EG funkcji sukcesu: setInterval(myFunction,2500);

Answer 6

Będzie pomocne dla ciebie ....

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