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执行一个以上的时间

回答

相关问题