在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>

现在,mouseoverevent仅触发具有名称language(或顶部输入元素)的事件.为什么mouseover没有为第二和第三个输入元素触发事件？

Answer 1

注:该ids的注定不会被复制.你曾id="search"多次使用过.

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

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

回答你的问题:

原因是,您正在执行第一个匹配元素上的.attr()(它是仅处理一个元素的许多函数之一).