.click事件調用過兩次？

Question

我不確定發生了什么問題，但是我正在chrome或Firefox中嘗試使用此代碼，並且該事件被兩次觸發兩次，有什么幫助嗎？ 我得到一個空的多余“ <li> </ li>”

HTML代碼

  <div id="nav">
 <ul>
   <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Bread</li>
 </ul>

  <!-- Input field -->

  <input type="submit" name="search" value="Add" id="submit" style="float:   right" />
 <div style="overflow: hidden; padding-right: .5em;">
  <input id="box" type="text" name="add" value="" style="width: 100%;" />
  </div>

</div>

jQuery代碼

<script>


  $('#submit').click(function(e){

      var add = $("#box").val();
         if(add !="")
             $("#nav ul").append("<li>"+add+"<li>");
       e.preventDefault();
       e.stopPropagation();
   });

   $('#box').keypress(function(e){
       var add = $("#box").val();
       if(e.which == 13)//Enter key pressed
       $("#nav ul").append("<li>"+add+"<li>");

    });


 </script> 

Answer 1

click事件未觸發兩次，問題在於您正在執行此操作

$("#nav ul").append("<li>"+add+"<li>"); 

這是兩個打開的<li>標記。 因此它被輸出為<li>entered text</li>和<li></li> 。 改為這樣做：

$("#nav ul").append("<li>"+add+"</li>"); //close the tag

看到這個小提琴