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

【问题标题】：How to trigger multiple event on different html element but inside one jQuery function如何在不同的 html 元素上但在一个 jQuery 函数内触发多个事件
【发布时间】：2017-06-30 11:13:29
【问题描述】：

我需要在同一个事件中触发 2 个事件，但来自不同的 HTML 元素。我的意思是我有搜索文本框和搜索按钮。单击搜索按钮时，我需要在搜索文本框 OR 内的 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(); 
});

【问题讨论】：

请包含所有相关代码。
给我 10 分钟，我正在测试一些东西，我会为你们发布所有脚本
只需定义一个新类并将其分配给两个元素。使用该元素进行事件委托，您就完成了。
@hallleron 没有明白你的意思，请查看我当前的脚本，我将在几分钟内添加，如果我可以使用不同的东西

标签： jquery events triggers

【解决方案1】：

您可以使用它，但是当 searchBtn 元素注册按键事件以及单击 searchTxt 元素时（后者是用户选择文本框的非常常见的方式）。我相信@hallleron's 也会有同样的问题。

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

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

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

【讨论】：

【解决方案2】：

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

$('.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>

【讨论】：