Trouble with jQuery keyup()

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

我的代码:

<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>

防止特定表单提交，例如:

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

-jsFiddle -

对您的代码进行如下更改

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

将事件添加为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>

EDIT:如果这不起作用，通过添加:

来阻止表单提交

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

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

-jsFiddle -

相关内容

最新更新

热门标签：