jQuery的點擊事件與JavaScript回調gertting執行一個以上的時間

function MyConfirm(message, callback) { 
 
      console.log("In My Confirm"); 
 
      var ids = document.getElementById("mymodal"); 
 
      $('#MyText').html(message); 
 
      
 
      ids.style.display = "block" 
 
      
 
      $('input[id^=cfrm_]').click(function (e) { 
 
       e.preventDefault(); 
 
       console.log("In Click Event"); 
 
       if (typeof callback === 'function') { 
 
        callback($(this).attr('value')); 
 
       } 
 
       ids.style.display = "none" 
 
      });    
 
     } 
 

 
     var as="My Test Message"; 
 

 
     function mytest(){ 
 
      var na = MyConfirm(as, function (result) { 
 
       console.log("Result: "+result) 
 
      }); 
 

 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 

 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <head> 
 
    <title></title> 
 
    </head> 
 
    <body> 
 
    <form id="form1" runat="server"> 
 
    <div> 
 
    
 
     <input id="Button1" type="button" onclick="mytest()" value="button" /></div> 
 
     <div id="mymodal" style="display:none"> 
 
      <div id="MyText"></div> 
 
      <input id="cfrm_btnYes" type="button" value="Yes" /> 
 
      <input id="cfrm_btnNo" type="button" value="No" /> 
 
     
 
      </div> 
 
    </form> 
 
</body> 
 
</html>

我用上面的代碼來模仿默認的確認對話框窗口作用。該功能工作正常。但是一旦點擊按鈕mytest（）被調用，並且它使div #mymodal按照預期的那樣通過兩個按鈕可見。但是，當您單擊「是」或「否」按鈕時，它會隱藏div，但會多次循環使用MyConfirm函數。它可以在控制檯中看到。任何人都可以解釋我爲什麼會得到這個奇怪的答案。我的目標是爲confirm（）fn創建一個備用。具有返回值。

來源

2017-07-29 Rahul S

問題是你綁定了一個新的click事件來確認按鈕每個時間MyConfirm()函數執行。 click事件綁定不會覆蓋舊的綁定，但會向該事件添加新的函數。

在綁定新綁定之前，您可以添加$('input[id^=cfrm_]').off('click');以刪除舊綁定。

function MyConfirm(message, callback) { 
 
      console.log("In My Confirm"); 
 
      var ids = document.getElementById("mymodal"); 
 
      $('#MyText').html(message); 
 
      
 
      ids.style.display = "block" 
 
      
 
      $('input[id^=cfrm_]').off('click'); 
 
      
 
      $('input[id^=cfrm_]').click(function (e) { 
 
       e.preventDefault(); 
 
       console.log("In Click Event"); 
 
       if (typeof callback === 'function') { 
 
        callback($(this).attr('value')); 
 
       } 
 
       ids.style.display = "none" 
 
      });    
 
     } 
 

 
     var as="My Test Message"; 
 

 
     function mytest(){ 
 
      var na = MyConfirm(as, function (result) { 
 
       console.log("Result: "+result) 
 
      }); 
 

 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 

 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <head> 
 
    <title></title> 
 
    </head> 
 
    <body> 
 
    <form id="form1" runat="server"> 
 
    <div> 
 
    
 
     <input id="Button1" type="button" onclick="mytest()" value="button" /></div> 
 
     <div id="mymodal" style="display:none"> 
 
      <div id="MyText"></div> 
 
      <input id="cfrm_btnYes" type="button" value="Yes" /> 
 
      <input id="cfrm_btnNo" type="button" value="No" /> 
 
     
 
      </div> 
 
    </form> 
 
</body> 
 
</html>

來源

2017-07-29 15:39:50

請試試return。也許它會準備好。

來源

2017-07-29 11:37:52

jQuery的點擊事件與JavaScript回調gertting執行一個以上的時間

回答

相關問題