jquery - .click 事件调用了两次？

Question

我不确定出了什么问题，但我在 chrome 或 Firefox 中尝试这段代码，我得到了两次触发事件的帮助？我得到一个空的额外“

”

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>

J查询代码

<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

点击事件没有被触发两次，问题是你这样做

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

这是两个开<li>标签。所以它被输出为 <li>entered text</li>和 <li></li> .改为这样做:

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

查看此 fiddle