Question

我有一个文本框和图像按钮，我想搜索在文本框中输入的内容（都在文本框中输入）并点击搜索图像（图标）应该有效..

我试过了：

$(document).ready(function () { 

    $('.customSearchButton').on("click","img", function (e) {

       var search = $("#txtSearch").val();         
       var searchEncoded = encodeURIComponent(search);

       window.location = "/Search.aspx?name=" + searchEncoded;

     });
});

我的Html是：

 <li class="customTopNavSearch">
                                            <input type="text" id="txtSearch" />
                                            <a href="#" class="customSearchButton">
                                                <img src="search-button.png" alt="Search" />
                                            </a>
                                        </li>

Answer 1

您使用的是event-delegation。这假定您的img - 元素是.customSearchButton - 元素的后代。如果要在多个元素上绑定事件，可以使用逗号分隔它们：

function redirect(){
    var search = $("#txtSearch").val();         
    var searchEncoded = encodeURIComponent(search);

   window.location = "/Search.aspx?name=" + searchEncoded;
}

$('.customSearchButton, img').on("click keypress", function (e) {

       if (e.which == 13 && $(e.target).is('input')) {
           redirect();
       } else if($(e.target).is('img')){
           redirect();
       }

 });

点击input或点击img时会触发此代码段。

<强> Demo

根据您尝试实现的目标，确定更实际的是定义两个不同的事件处理程序并调用辅助函数。注意：如果您想要访问在函数内触发事件的元素，您只需将$(this) - 对象作为参数传递。

<强>参考

.is()

.which

Answer 2

提取功能：

function PerformSearch()
{
    var search = $("#txtSearch").val();
    var searchEncoded = encodeURIComponent(search);
    window.location = "/Search.aspx?name=" + searchEncoded;
}

然后你可以将它绑定到你想要的任何东西：

  $('#txtSearch').keypress(function(e) {
    if(e.which == 13) {
        PerformSearch();
    }
  });

  $('.customSearchButton').on("click","img", PeformSearch);

注意：e.which包含您用来评估按下了哪个键的值（即，哪个按键调用了处理程序）。所有按键都会调用按键处理程序，但它是您要检查的回车键（值为13）。

Answer 3

扭曲函数中的公共代码。将该函数绑定为图像的单击事件处理程序，并单击“输入调用方法”。

function myEventHandler(){
   var search = $("#txtSearch").val();         
   var searchEncoded = encodeURIComponent(search);

   window.location = "/Search.aspx?name=" + searchEncoded;
}

$(document).ready(function () { 
    $('.customSearchButton').on("click","img", myEventHandler);
    $("#txtSearch").on("keyup",function (e) {
        //If Enter is pressed call the method
        if(e.which == 13){
            myEventHandler();
        }
     });
});

event.which

对于键或鼠标事件，此属性指示已按下的特定键或按钮。

如何在jquery中同时使用$ function两个事件

3 个答案: