Question

如果按下输入按钮，我一直在努力尝试触发按钮。我尝试过trigger（）并点击（）并没有运气。我无法弄清楚为什么它不会执行，当用鼠标点击时搜索按钮可以正常工作，但是当按下输入按钮时却没有。

$(document).ready(function() {

    //alert("this");
    //$('#btnsearch').trigger('click');

$("#txtsearch").keyup(function(event){
    if(event.keyCode == 13){
        $("#btnsearch").click();
    }
});
    $('#btnsearch').click(function(event) {
        var searchText = $('#txtsearch').val();
        $.ajax({

            url: domain + "",
            type: "GET",
            headers: {
              Accept: "application/json;odata=verbose"
            },
            success: function(data) {


              $.each(data.d.results, function(index, item) {
                $('#tblResult tbody').append('<tr><td style="">' + '<a href = "' + item.Details + '">' + item.Title + '</td></tr>');


              }

            )};

          event.preventDefault();



        });
    });
});

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form class="navbar-form navbar-right">
                <div id="" class="navbar-form navbar-right">
                    <div class="input-group">
                        <input id="txtsearch" type="text" class="form-control" placeholder="Search" />
                        <div class="input-group-btn">
                            <button id="btnsearch" class="btn btn-default" type="button">
                                <i class="glyphicon glyphicon-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </form>

Answer 1

由于您的input已包含在form元素中，因此默认情况下会出现此行为，因此keyup处理程序是多余的。

您遇到的更大问题是代码中的几个语法错误，您可以在问题中运行代码段时在控制台中看到这些错误。

您在 jQuery之前已经包含了Bootstrap 。

必须采用相反的方式
您对preventDefault()的来电位于$.ajax设置对象内并导致语法错误

success中的$.ajax处理函数未正确关闭。

当您解决这些问题时，它可以正常工作：

$(function() { $('.navbar-form').submit(function(e) { e.preventDefault(); var searchText = $('#txtsearch').val(); $.ajax({ url: domain, type: "GET", headers: { Accept: "application/json;odata=verbose" }, success: function(data) { $.each(data.d.results, function(index, item) { $('#tblResult tbody').append('<tr><td><a href="' + item.Details + '">' + item.Title + '</td></tr>'); }); } }); }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <form class="navbar-form navbar-right"> <div id="" class="navbar-form navbar-right"> <div class="input-group"> <input id="txtsearch" type="text" class="form-control" placeholder="Search" /> <div class="input-group-btn"> <button id="btnsearch" class="btn btn-default" type="button"> <i class="glyphicon glyphicon-search"></i> </button> </div> </div> </div> </form>

Answer 2

这是按Enter键的事件处理程序：

＆＃13;

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

＆＃13;

编辑：您应该在一个函数中运行您的单击，这样您就可以将它重用于两个场景（keyup和click），如：

＆＃13;

$(document).ready(function() {

    //alert("this");
    //$('#btnsearch').trigger('click');

  function submitSearch(){
    var searchText = $('#txtsearch').val();
    $.ajax({
      url: domain + "",
      type: "GET",
      headers: {
        Accept: "application/json;odata=verbose"
      },
      success: function(data) {
        $.each(data.d.results, function(index, item) {
          $('#tblResult tbody').append('<tr><td style="">' + '<a href = "' + item.Details + '">' + item.Title + '</td></tr>');
        }
      )};
  }

  $('#btnsearch').click(function(event) {
    submitSearch();
    event.preventDefault();
  });

  $(document).keyup(function(event){
      submitSearch();
  });

});

＆＃13;

如果单击“输入”按钮，则返回搜索结果

2 个答案: