Question

我不确定这是错的，但是我在chrome或Firefox中尝试这个代码，我得到的事件会被触发两次任何帮助吗？我正在寻找一个空的额外＆＃34;＆lt; li> ＆LT; /立GT;＆＃34;

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

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

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

这是两个开放的<li>标记。因此它会以<li>entered text</li>和<li></li>输出。这样做：

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

请参阅此fiddle

.click事件叫了两次？

1 个答案: