アラート/ブートストラップモードで複数回発火を確認するfullCalendar eventClick

Question

eventClickをfullcalendarで使用していますが、次の問題があります。イベントをクリックするとモーダルが開き、この特定のイベントを編集できます。私がsave（別のonclick関数で）をクリックすると、モーダルが以前に開かれた回数だけ発火しているという確認があります。

これは私のhtmlコードである

eventClick: function (calEvent, jsEvent, view) { 

    $('#myModalEditEvent').modal('show'); 

    $("#deleteEventfromEditModal").click(function() { 
       if (!confirm("are you sure?")) { 
        return 0; 
       } 
       else { 
        var classID = calEvent.id; 

        var deleteRequest = { 
         classID: classID, 
        }; 

        var dataString = JSON.stringify(deleteRequest); // parsing the request above. 
        $.ajax({  // starting an ajax func 
         }) 
       }; 
      }); 
} 

...私はコードの私の作品でそれを説明しましょう：

<div class="modal fade" id="myModalEditEvent" role="dialog"> 
    <div class="modal-dialog modal-sm"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title" id="EditEventHeader"></h4> 
      </div> 
      <div class="modal-body"> 
       <div class="form-group"> 
        <select id="ClassesDDLEdit" class="form-control"></select> 
       </div> 
       <div class="form-group"> 
        <select id="GuidesDDLEdit" class="form-control"></select> 
       </div> 
       <div class="input-group bootstrap-timepicker timepicker"> 
        <input id="classStartTimeEdit" type="text" class="form-control input-small" placeholder="Start time"> 
        <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span> 
       </div><br /> 
       <div class="input-group bootstrap-timepicker timepicker"> 
        <input id="classEndTimeEdit" type="text" class="form-control input-small" placeholder="start time"> 
        <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span> 
       </div><br /> 
       <div class="modal-footer"> 
        <button type="button" id="AddEventAfetEditing" class="btn btn-info center-block" data-toggle="modal" data-target="#myModalEditEvent">Save</button><br /> 
        <button type="button" id="deleteEventfromEditModal" class="btn btn-danger glyphicon glyphicon-trash center-block" data-toggle="modal" data-target="#myModalEditEvent"></button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

iが起こってからそれを防ぐために何ができるのでしょうか？

ありがとうございました！

Answer 1

変更し、あなたの次の行。したがって、毎回アンバインドする必要があります。

Answer 2

あなたはeventClick外この

$("#deleteEventfromEditModal").click(function() { 
       ... 
}); 

を行い、そしてexempleのため、ページの読み込みにそれを行う必要があります。そのため、すべてはあなたがクリックイベントを結合している]をクリックし上

$("#deleteEventfromEditModal").unbind("click").click(function() { 

に従ってください

$("#deleteEventfromEditModal").click(function() { 

として

$(document).ready(function(e){...})