Get HTML-Komponente, von der Schaltfläche gedrückt wurde

Question

Wie bekomme ich die HTML-Komponente, die die Schaltfläche enthält, die mit jQuery angeklickt wurde? Nachdem eine Schaltfläche geklickt wurde, muss ich das Invite-Objekt abrufen, das der angeklickten Schaltfläche entspricht, und eine Postanforderung an einen bestimmten Link senden.

{% if invites %} 
    {% for invite in invites %} 
     <p>Your invites:</p> 
     <div class="row"> 
      <label style="display: block">Invite from {{ invite.initiator }} to join his conference!</label> 
      <button type="button" id="ButtonId">Accept invite</button> 
     </div> 
    {% endfor %} 
{% endif %} 

Das Skript:

<script type="text/javascript"> 
    $(function() { 

     $('#ButtonId').on('click',function(){ 
      !$(this).hasClass('ButtonClicked') ? addClass('ButtonClicked') : ''; 
      $('#ButtonId').val('Done'); 
      var data = { 

      }; 

      $.ajax({ 
       url: '/api/send_invite/' + /*the username*/, 
       data: JSON.stringify(data , null, '\t'), 
       contentType: 'application/json;charset=UTF-8', 
       type: 'POST', 
       success: function() { 
       } 
      }); 
     }); 

    }); 
</script> 

Answer 1

Ihre „HTML Komponente "ist der Knopf eingepackt? Wenn ja, um das Element zu erhalten, das die Schaltfläche enthält, die (die „Eltern“ der Schaltfläche) geklickt wird, um Ihnen so etwas tun kann:

$('#myButton').on('click',function(){ 
    var buttonParent = $(this).parent(); 
    // do your stuff.. 
}); 

für das Erhalten der „laden Objekt“ können Sie anhängen ein Datenattribut an die accept-laden-Taste, wird dieses Datenattribut einen Wert enthält, dass Sie das richtige Objekt holen werden verwenden, zum Beispiel:

<button type="button" id="inviteAcceptBtn" data-object-id="123">Accept invite</button> 

Dann können Sie bekommen, dass „Objekt-ID“ mit einfachen jQuery:

$('#inviteAcceptBtn').on('click',function(){ 
    var objectId = $(this).data('object-id'); 
    // do your stuff.. 
}); 

Es gibt wahrscheinlich eine Handvoll anderer Methoden, da es viele Techniken gibt, dies zu tun.

Hoffe, dass es ein wenig

Answer 2

Es gibt mehrere Möglichkeiten, dies zu tun:

die den Benutzernamen als eines der Attribute der Schaltfläche Set.

invite.initiator vorausgesetzt, ist der Benutzername, die Sie

<button type="button" id="ButtonId" username={{invite.initiator}}>Accept invite</button> 

im JavaScript-Code zu senden beabsichtigen Sie dieses Element mit leicht zugänglich machen können attr Methode auf this

url: '/api/send_invite/' + $(this).attr("username"), 

Answer 3

@ sudomakeinstall2 hilft: Es sollte besser sein, die Daten als Daten attrbute hinzufügen so:

<button type="button" id="ButtonId" username={{invite.initiator}}>Accept invite</button> 

wird

<button type="button" id="ButtonId" data-username="{{invite.initiator}}">Accept invite</button>