當我的代碼不僅會提醒一次？

Question

$(document).ready(function(){ 
 
    $("#add_form").hide(); 
 
}); 
 

 

 
function checkID(obj) { 
 
    var href = obj.getAttribute('href'); // get link href 
 
    console.log(href); 
 
    if ($("#add_form").is(":hidden")) { 
 
     $("#userID").val(""); 
 
     $("#add_form").slideDown(500); 
 
     $('<div/>',{     // create a dynamic overlay div 
 
     id:"overlay" 
 
     }).appendTo("body"); 
 
    } 
 

 
    $("#submitCheck").on("click", function() { 
 
     var value = $("#userID").val();// user input 
 
     var index = $.inArray(value, ["1234", "5678"]) 
 
     alert(index); 
 
     closeForm(); 
 
    }); 
 
} 
 

 
function closeForm() { 
 
    $("#add_form").hide(); 
 
    $('#overlay').remove();   // remove this overlay when cancel clicked. 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href="" onclick="checkID(this); return false;">Click Here</a> 
 
<div class="center"> 
 
     <div id="add_form"> 
 
      <input type="text" id="userID" name="userID"> 
 
      <!-- <br/> --> 
 
      <button type="button" id="submitCheck">comfirm</button> 
 
      <button type="button" id="submitCancel" onclick="closeForm();">Cancel</button> 
 
     </div> 
 
    </div>

1.當我點擊按鈕，表格就會彈出，我輸入「11」，那麼警報-1 背部和彈出窗口消失。

2.I再次點擊按鈕，鍵入「11」並提醒-1 兩次。

任何人都知道爲什麼它返回-1兩次？

Answer 1

僅在submitCheck上綁定click事件一次。爲此，請將代碼放在函數之外，並在DOM Ready callback之內，如下所示。

$(document).ready(function(){ 
 
    $("#submitCheck").on("click", function() { 
 
     var value = $("#userID").val();// user input 
 
     var index = $.inArray(value, ["1234", "5678"]) 
 
     console.log(index); 
 
     closeForm(); 
 
    }); 
 
    $("#add_form").hide(); 
 
}); 
 

 

 
function checkID(obj) { 
 
    var href = obj.getAttribute('href'); // get link href 
 
    console.log(href); 
 
    if ($("#add_form").is(":hidden")) { 
 
     $("#userID").val(""); 
 
     $("#add_form").slideDown(500); 
 
     $('<div/>',{     // create a dynamic overlay div 
 
     id:"overlay" 
 
     }).appendTo("body"); 
 
    } 
 

 
    
 
} 
 

 
function closeForm() { 
 
    $("#add_form").hide(); 
 
    $('#overlay').remove();   // remove this overlay when cancel clicked. 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href="" onclick="checkID(this); return false;">Click Here</a> 
 
<div class="center"> 
 
     <div id="add_form"> 
 
      <input type="text" id="userID" name="userID"> 
 
      <!-- <br/> --> 
 
      <button type="button" id="submitCheck">comfirm</button> 
 
      <button type="button" id="submitCancel" onclick="closeForm();">Cancel</button> 
 
     </div> 
 
    </div>