Wie kann ich feststellen, ob in meiner JQuery-Funktion auf eine bestimmte Schaltfläche in einem Bootstrap-Modal geklickt wurde?

Question

Hier ist die Situation: Meine Funktion zeigt ein Modal, das eine Tabelle aller Klassen für einen Schüler enthält. Dieses Modal hat zwei Knöpfe, einen Studenten abbrechen und entlassen. Wenn der Benutzer auf die Schaltfläche Student abbrechen klickt, möchte ich, dass meine Funktion die attendeeClasses Daten kennt und annimmt, und darauf reagieren (im Grunde werde ich nur jede Klasse durchlaufen und diesen Studenten als entlassen markieren).

Ich dachte, dass ich einen Event-Handler für das Click-Ereignis auf der Schaltfläche erstellen müsste, aber würde ich diesen Handler nicht innerhalb dieser Funktion platzieren müssen? Ich meine, wenn der Handler außerhalb dieser Funktion war (diejenige, die das Modal anzeigt), dann kann der Handler nicht auf die Daten zugreifen (wie die Liste der Klassen). Ich bin ein wenig neu in JQuery, also weiß ich nicht, ob es eine Möglichkeit gibt, eine globale Variable so zu setzen, dass sowohl der Event-Handler als auch die Funktion, die das Modal anzeigt, darauf zugreifen kann.

Hier ist mein JQuery:

function GetAllClassessForAttendee(classAttendeeId, attendanceStatus, topicAttendanceId) { 
    var classesTable = $("#attendeeClasses tbody"); 

    $.ajax({ 
     url: "/Class/GetAllClassAttendanceForEmployee/", 
     type: "GET", 
     data: { classAttendeeId: classAttendeeId, topicAttendanceId: topicAttendanceId, attendanceStatus: attendanceStatus, __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val() }, 
     beforeSend: function (jqXHR, textStatus) { 
      $("#loadingImage").show(); 
     }, 
     complete: function (jqXHR, textStatus) { 
      $("#loadingImage").hide(); 
     }, 
     success: function (attendeeClasses) { 
      $.each(attendeeClasses, function(i, attendeeClass) { 
       classesTable.append(
        '<tr><td>' 
        + attendeeClass.Date 
        + '</td><td>' 
        + attendeeClass.EmployeeName 
        + '</td><td>' 
        + attendeeClass.Topic 
        + '</td></tr>' 
       ); 
      }); 

      // Display a list of attended classes in Bootstrap modal 
      $("#classes").dataTable({ 
       "bRetrieve": true, 
       "bPaginate": false, 
       "bFilter": false, 
       "aoColumnDefs":[ 
        {"aTargets": [ "_all" ], "bSortable": false} 
       ] 
      }); 

      $("#dismissalModal").modal('show'); 

      // If dismiss button is clicked 
      // handle the dismissal of student 
      // from each class 
      // TODO: Insert code here 

     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      if (xhr.responseText !== "") { 
       alertify.alert(xhr.responseText); 
       alertify.error(xhr.responseText); 
      } 
     } 
    }); 
} 

Hier ist der HTML-Code für den Modal, die angezeigt wird:

<!-- Modal HTML --> 
    <div id="dismissalModal" class="modal fade"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        <h4 class="modal-title">Confirmation</h4> 
       </div> 
       <div class="modal-body"> 
        <p>Are you sure you want to dismiss the student from these classes?</p> 
        <p class="text-warning"><small>Press Cancel to leave this dialog.</small></p> 
        <table id="attendeeClasses"> 
         <thead><tr><th>Date</th><th>Attendee</th><th>Topic</th></tr></thead> 
         <tbody></tbody> 
        </table> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
        <button type="button" class="btn btn-primary" id="dismissBtn">Dismiss Student</button> 
       </div> 
      </div> 
     </div> 
    </div> 

Zum Vergleich: Hier ist ein Bild des Bootstrap-modal die angezeigt wird:

Answer 1

Sie müssen den Event-Handler nicht in die Funktion einfügen. In der Tat sollten Sie fast sicher nicht - es wird den Handler jedes Mal neu erstellen, wenn Sie die Funktion aufrufen, was unnötig ist. Ihre Anweisung Wenn sich der Handler außerhalb dieser Funktion befindet (der Modal), kann der Handler nicht auf die Daten zugreifen (wie die Liste der Klassen). ist wahr, vorausgesetzt, Sie meinen die JSON-Daten in der Variablen atterieClasses . Sie können das beheben, indem Sie es in einer globalen Variablen speichern, wenn es ankommt.

Setzen Sie den Handler außerhalb Ihrer Funktion, aber innerhalb der document.ready Handler:

var attendeeClassesGlobal = []; //global to store attendees 

$(document.ready(function() { 
    $("#dismissBtn").click(function(event) { 
    //do whatever you want with attendeeClassesGlobal here 
    }); 
}); 

In Ihrem Ajax „Erfolg“ Funktion, fügen Sie eine zusätzliche Zeile die Teilnehmerliste in der globalen Variablen zu speichern:

success: function (attendeeClasses) { 
    attendeeClassesGlobal = attendeeClasses; 
    //...etc 
} 

Eine andere Sache:

$("#classes").dataTable({... 

ich kein Element Witz sehen h id = "Klassen" in Ihrer Stichprobe. Meinten Sie "#attendeeClasses"?