Feuer Ereignisse auf mehr als ein Element in html

Question

Ich habe einen jQuery-Code

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

Ich habe drei Eingangselemente.

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> 

Nun mouseover Ereignis nur Brände, die Namen language (oder das obere Eingangselement) haben. Warum wird mouseover Event nicht für das zweite und dritte Eingabeelement ausgelöst?

Answer 1

Hinweis: Die id s sind nicht als Duplikate gedacht. Sie haben oft id="search" verwendet.

Sie müssen die kontextsensitivethis Stichwort verwenden:

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

Um Ihre Frage zu beantworten:

Der Grund dafür ist, ausgeführt werden Sie die .attr() (das ist eine von vielen Funktionen, die nur ein Element) auf dem ersten übereinstimmenden Element verarbeitet.

Answer 2

Sie müssen sich auf das aktuelle Element beziehen, das mit $(this), this durchgeführt wird, verweisen Sie auf das Element, das das Ereignis aufruft. $(this) wird das Objekt zurückgeben. Während $('input').attr('name') zur ersten input Element beziehen

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

JSFIDDLE

Answer 3

könnten Sie den Parameter Ihres Handler:

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

e.target ist exatcly das Element Sie suchen.

können Sie direkt Javascript verwenden, anstatt das Element in ein jQuery-Objekt zu verwandeln:

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

Answer 4

In JQuery Code bekommen Sie immer "Sprache"input, weil es zuerst ist input in dom, wie Ihre Codesuche zuerst input.

Ihre jQuery-Code ändern, wie unten:

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