jQuery Parent changement HTML intérieur

Question

Je suis ce jusqu'à présent:

$('.event-tools a').click(function() 
{ 
    var status = $(this).attr('id'); 
    var id = $(this).parent().attr('id'); 

    $.ajax({ 
     type: "GET", 
     url: "http://localhost:8888/update/test.php", 
     data: "rsvp=" + status + '&id=' + id, 
     success: function() 
     { 
      $(this).parent().html(status); 
      //alert(status); 
     }, 
     error: function() 
     { 
      alert('failz'); 
     } 
    }); 
}); 

Avec ceci:

<span class="rsvp" id="1"> 
    <a href="#" class="rsvp" id="Attending">Attending</a> 
    <a href="#" class="rsvp" id="Maybe Attending">Maybe Attending</a> 
    <a href="#" class="rsvp" id="Not Attending">Not Attending</a> 
</span> 

Lorsque je clique sur l'un d'eux et utilise le alert() cela fonctionne en invitant la zone d'alerte, cependant, quand j'utilise le $(this).parent().html(status); sur l'événement success:, cela ne change pas le HTML avec le status ...

Answer 1

this dans votre fonction de succès n'a pas la même portée qu'à l'extérieur, puisque JavaScript a une portée de fonction. Vous devez faire quelque chose comme ceci pour préserver la valeur d'origine de la this de fonction extérieure:

var self = this; 
$.ajax({ 
    // ... 
    success: function() { 
     $(self).parent().html(status); 
    } 
}); 

Sinon, vous pouvez utiliser .proxy()-method de jQuery:

$.ajax({ 
    // ... 
    success: $.proxy(function() { 
     $(this).parent().html(status); 
    }, this) 
}); 

Answer 2

essayer cette

JS:

$('.event-tools a').click(function(ev) 
{ 
    ev.stopPropagation() 

    var status = $(this).attr('id'), 
     id = $(this).parent().attr('id'), 
     myparent = $(this).parent(); 

    $.ajax({ 
     type: "GET", 
     url: "http://localhost:8888/update/test.php", 
     data: "rsvp=" + status + '&id=' + id, 
     success: function() 
     { 
      $(myparent).parent().html(status); 
      //alert(status); 
     }, 
     error: function() 
     { 
      alert('failz'); 
     } 
    }); 
    return false; 
}); 

HTML:

<span class="event-tools" id="1"><!-- this has class = "rsvp" --> 
    <a href="#" class="rsvp" id="Attending">Attending</a> 
    <a href="#" class="rsvp" id="Maybe Attending">Maybe Attending</a> 
    <a href="#" class="rsvp" id="Not Attending">Not Attending</a> 
</span>