Bootstrap Modalの特定のボタンがJQuery関数でクリックされたかどうかを確認する方法はありますか？

Question

状況は次のとおりです。私の関数は、学生用のすべてのクラスのテーブルを含むモーダルを表示します。そのモーダルにはキャンセルボタンと却下ボタンの2つのボタンがあります。ユーザーが[Dismiss Student]ボタンをクリックした場合、私は自分の関数が知り、attendeeClassesのデータを取得し、それに基づいて行動するようにしたい（基本的には、各クラスをループし、その学生を解雇としてマークする）。

ボタンのクリックイベントのイベントハンドラを作成する必要があると思っていましたが、この関数内にそのハンドラを配置する必要はありませんでしたか？つまり、ハンドラがこの関数（モーダルを表示する関数）の外側にある場合、ハンドラはデータ（クラスのリストのような）にアクセスできません。私はJQueryにとって少し新しく、イベントハンドラとモーダルを表示する関数の両方がそれにアクセスできるようにグローバル変数を設定する方法があるかどうかはわかりません。参考のため

<!-- 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> 

：

：ここに表示されますブートストラップモーダルのPICだ。ここ

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); 
      } 
     } 
    }); 
} 

が表示されますモーダルのためのHTMLです：

は、ここに私のjQueryの

Answer 1

イベントハンドラを関数内に配置する必要はありません。事実、ほとんどの場合、関数を呼び出すたびにハンドラが再作成されます。これは不要です。あなたのステートメントハンドラがこの関数（モーダルを表示するもの）の外にあった場合、ハンドラはattendeeClasses変数のJSONデータを意味すると仮定すると、が真であるデータにアクセスできません。それが到着したときにグローバル変数に格納することでそれを修正することができます。

あなたの関数の外ハンドラを入れますが、document.readyハンドラ内：あなたのAJAX「成功」機能で

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

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

、グローバル変数に出席者リストを格納するための1つの余分の行を追加します。

私は、任意の要素のウィットを見ることができない

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

：

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

もうひとつあなたのサンプルのh id = "classes"。あなたは "#attendeeClasses"を意味しましたか？