Question

我需要在同一个事件中触发2个事件，但是来自不同的HTML元素。我的意思是我有搜索文本框和搜索按钮。我需要在点击搜索按钮时在搜索文本框或内的keyup上显示搜索结果。

我在堆栈溢出时找到了这个答案，但它只能用于一个元素和几个事件：

$('#element').on('keyup keypress blur change', function(e) {
    // e.type is the type of event fired
});

是否可以或应该复制我的脚本但是更改每个元素的事件？

我正在使用的是：

$('#searchBtn').on('click',function() 
{ 
    surfData(); 
});

$('#searchTxt').on('keypress',function() 
{ 
    surfData(); 
});

Answer 1

这就是我为“为他们定义一个类”的意思：

$('.search_elem').on('keyup click', function(){
  console.log("Event fired!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="search_elem" type="text" placeholder="search ...">
<button class="search_elem">Start search</button>

Answer 2

你可以使用它，但是当searchBtn元素注册一个按键事件以及点击searchTxt元素时（后者），它会产生触发回调（以及你的surfData函数）的副作用。是用户选择文本框的一种非常常见的方式）。我相信@ hallleron会遇到同样的问题。

$('#searchBtn, #searchTxt').on('click keypress',function() 
{ 
    surfData(); 
});

为了避免这些副作用，你需要保留你拥有的代码（这已经非常简化了;下面是我能想到的唯一更简单的版本）

$('#searchBtn').click(surfData);
$('#searchTxt').keypress(surfData);

如何在不同的html元素上触发多个事件但在一个jQuery函数内

2 个答案: