jQuery keyup() 有问题

Question

页面重新加载而不是调用点击函数，但如果我在 .html 扩展名后插入查询字符串 ?#，它就可以工作。在 chrome

中测试

我的代码：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>

        $(document).ready(function () {

            $('#search_btn').click(function () {
                alert("searching");
                // search functions

            });

            $("#search").keyup(function (event) {
                if (event.which == 13) {
                    alert("enter key pressed");
                    $("#search_btn").click();
                }
            });
        });

    </script>
</head>
<body>
    <form>
       <input type="text" id="search" />
       <button class="btn" type="button" id="search_btn">Search</button>
    </form>
</body>
</html>

Answer 1

对您的代码进行此更改

$('#search_btn').click(function (e) {
     e.preventDefault();
     alert("searching");
     // search functions
});

Answer 2

将事件添加为 click() 函数的参数，然后使用 event.preventDefault() 阻止该事件的默认处理程序，这样它就不会重定向。

    $(document).ready(function() {

      $('#search_btn').click(function(e) {
        e.preventDefault();
        alert("searching");
        // search functions

      });

      $("#search").keyup(function(event) {
        if (event.which == 13) {
          alert("enter key pressed");
          $("#search_btn").click();
        }
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <input type="text" id="search" />
  <button class="btn" type="button" id="search_btn">Search</button>
</form>

编辑： 如果这不起作用，请通过添加以下内容来阻止提交表单：

  $('form').on('submit', function(e) {
    e.preventDefault();
  });

您可以将 form 替换为提供给表单的 ID。

Answer 3

防止提交特定的表格，使用例如：

$('form:has(#search)').on('submit', function(e){
    e.preventDefault();
});

jQuery keyup() 有问题

Trouble with jQuery keyup()

javascript

jquery

keyup

-jsFiddle-