jqueryモーダル関数のダブルトリガー

私は前の関数を常に2倍にするこのコードを持っています。jqueryモーダル関数のダブルトリガー

var deleteModal = $('.bs-delete-modal-sm'); 
 
deleteModal.on('shown.bs.modal', function(event) { 
 
    var button = $(event.relatedTarget); // Button that triggered the modal 
 
    var recipientId = button.data('aishid'); 
 

 
    var confirmBtn = deleteModal.find('.confirmDeleteBtn'); 
 
    var parent = button.closest('.year-calendar'); 
 
    //console.log(confirmBtn); 
 
    confirmBtn.click(deleteHoliday); 
 

 
}); 
 

 
function deleteHoliday() { 
 
    $('.textherearea').append('here '); 
 
    deleteModal.modal('hide'); 
 
}

<html> 
 

 
<head> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <button class="deleteBtn" data-toggle="modal" data-target=".bs-delete-modal-sm" data-aishid="24"><i class="fa fa-trash"></i> 
 
    </button> 
 
    <button class="deleteBtn" data-toggle="modal" data-target=".bs-delete-modal-sm" data-aishid="25"><i class="fa fa-trash"></i> 
 
    </button> 
 
    <div class="modal fade bs-delete-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> 
 
    <div class="modal-dialog modal-sm"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
      </button> 
 
      <h4 class="modal-title" id="myModalLabel">Confirm delete?</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      Delete this holiday? 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      <button type="button" class="btn btn-primary confirmDeleteBtn">Confirm</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class='textherearea'></div> 
 
</body> 
 

 
</html>

それはモーダル皮革の後、ボタントリガーから起動再と思われ、確認ボタン添付機能は二倍に実行されます。

誰かがこれを解決して一度だけ実行させる方法について私に指摘できますか？

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

出典

2016-06-26 alisongaleon

confirmBtn.click(deleteHoliday);を使用するたびに、JQueryが既存のハンドラのリストにクリックハンドラを追加し、ユーザがそれをクリックするとJQueryがすべてを1つずつトリガしますあなたはバインド解除する必要があるか、または既存のクリックイベントは、このような新しい結合前のボタンにバインドyou'vオフ：

confirmBtn.unbind("click"); //unbind is deprecated and its better to use .off() 
// 
confirmBtn.off("click");

をconfirmBtnが割り当てられたすべてのクリックイベントを持っているか、これを使用していない場合にも確認することができます。

var btnEvents = $._data(confirmBtn[0], 'events'); 
if(btnEvents && btnEvents.click) 
    console.log("btn has click event"); 
else 
    console.log("btn hasn't click event");

var deleteModal = $('.bs-delete-modal-sm'); 
 
deleteModal.on('shown.bs.modal', function(event) { 
 
    var button = $(event.relatedTarget); // Button that triggered the modal 
 
    var recipientId = button.data('aishid'); 
 

 
    var confirmBtn = deleteModal.find('.confirmDeleteBtn'); 
 
    var parent = button.closest('.year-calendar'); 
 
    //console.log(confirmBtn); 
 
    var btnEvents = $._data(confirmBtn[0], 'events'); 
 
    console.log(btnEvents); 
 
    if(btnEvents && btnEvents.click) 
 
    console.log("btn has click event"); 
 
    else 
 
    console.log("btn hasn't click event"); 
 
    //confirmBtn.unbind("click"); 
 
    confirmBtn.off("click"); 
 
    confirmBtn.click(deleteHoliday); 
 

 
}); 
 

 
function deleteHoliday() { 
 
    $('.textherearea').append('here '); 
 
    deleteModal.modal('hide'); 
 
}

<html> 
 

 
<head> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <button class="deleteBtn" data-toggle="modal" data-target=".bs-delete-modal-sm" data-aishid="24"><i class="fa fa-trash"></i> 
 
    </button> 
 
    <button class="deleteBtn" data-toggle="modal" data-target=".bs-delete-modal-sm" data-aishid="25"><i class="fa fa-trash"></i> 
 
    </button> 
 
    <div class="modal fade bs-delete-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> 
 
    <div class="modal-dialog modal-sm"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
      </button> 
 
      <h4 class="modal-title" id="myModalLabel">Confirm delete?</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      Delete this holiday? 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      <button type="button" class="btn btn-primary confirmDeleteBtn">Confirm</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class='textherearea'></div> 
 
</body> 
 

 
</html>

出典

2016-06-26 06:12:51 hsh

jqueryモーダル関数のダブルトリガー

答えて

関連する問題