jQuery 单击事件重新加载页面

Question

我正在尝试通过单击添加行按钮向 table 添加新行。但是，单击添加行按钮只会刷新页面。

我尝试了多种方法来阻止它，例如 preventDefualt 和 return false，但都无济于事。

<script type="text/javascript">
  $(function() {

    $('#btn-add-item').on('click'),
      function(e) {
        e.preventDefault();
        alert("works");
        return false;
      }

  });

</script>

<button class="btn btn-primary btn-sm" id="btn-add-item"><i class="fa fa-plus"></i> Add item</button>

Answer 1

您必须正确关闭 click 处理程序，检查结束括号的位置。

以下是格式正确的代码段：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
  $(function() {

    $('#btn-add-item').on('click', // <-- removing end paranthesis after "click" event will close the function
      function(e) {
        e.preventDefault();
        alert("works");
        return false;
      }); // <-- adding end paranthesis here

  });
</script>

<button class="btn btn-primary btn-sm" id="btn-add-item"><i class="fa fa-plus"></i> Add item</button>

jQuery 单击事件重新加载页面

jQuery Click Event Reloads Page

javascript

jquery

jquery-click-event