html 中不止一个元素触发事件

Question

我有一个jquery代码

$(function() {
    $("input").on("mouseover", function() {
        var a = $('input').attr('name');
        populate(a);
    });
});

我有三个输入元素。

Computer Language: <br>
    <div>
        <datalist id="language"></datalist>         
        <input type="text" list="language" name= "language" id="search"/>           
    </div>      
    <br>
    Country: <br>
    <div>
        <datalist id="country"></datalist>          
        <input type="text" list="country" name= "country" id="search" />            
    </div>  
    <br>

    Degree: <br>
    <div>
        <datalist id="degree"></datalist>           
        <input type="text" list="degree" name= "degree" id="search"/>           
    </div>

现在，mouseover 事件仅触发名称为 language（或顶部输入元素）的事件。为什么 mouseover 没有为第二个和第三个输入元素触发事件？

Answer 1

注意： id 不能重复。您已使用 id="search" 多次。

您需要使用 上下文相关 this 关键字：

$(function() {
  $("input").on("mouseover", function() {
    var a = $(this).attr('name');
    populate(a);
  });
});

回答你的问题：

原因是，您正在第一个匹配元素上执行 .attr()（这是许多只处理一个元素的函数之一）。

Answer 2

您需要引用使用 $(this) 完成的当前元素， this 引用调用事件的元素。 $(this) 将 return 对象。尽管 $('input').attr('name') 将引用第一个 input 元素

var a = $(this).attr('name');

JSFIDDLE

Answer 3

您可以使用处理程序的参数：

$("input").on("mouseover", function(e) {
       var a = $(e.target).attr('name');
       populate(a);
});

e.target正是您要找的元素。

您可以直接使用 javascript 将元素转换为 jQuery 对象：

$("input").on("mouseover", function(e) {
       var a = e.target.getAttribute('name');
       populate(a);
});

Answer 4

在JQuery代码中你总是得到"language"input，因为它是[=18=中的第一个input ]dom，因为你的代码先搜索 input.

更改您的 jQuery 代码如下：

$(function () {
    $("input").on("mouseover", function () {           
        var a = $(this).attr('name');
        populate(a);
    });
});

html 中不止一个元素触发事件

Fire events on more than one element in html

javascript

jquery

html

mousemove