選擇器ID和功能：爲什麼不工作？

Question

選擇器ID和功能：爲什麼不工作？

HTML：

<input type="text" id="textUpload" > 
<input type="text" id="textUpload2" value="" /> 

JS：

$("input").mouseover(function(){ 
    alert('111'); 
}); 

$("input#textUpload").mouseover(function(){ 
    alert('222'); 
}); 

$("#textUpload").mouseover(function(){ 
    alert('333'); 
}); 

$("#textUpload").click(function(){ 
    alert('444'); 
}); 

$("#textUpload").on('click', function(event) { 
    alert('555'); 
}); 

工作只 '111' 選項。爲什麼？

http://jsfiddle.net/nywuctuk/rw9t1pxL/17/

Answer 1

似乎有type="text"和id="之間的性格怪異。它看起來像一個空間，但不是。刪除它並用空格替換可修復您的代碼。 （編輯：Chrome檢查器顯示它是一個 ）

第一個選擇器工作的原因，我假設是因爲它是唯一一個按類型選擇而不是ID。因此它不受格式錯誤的屬性影響。

 
$("#textUpload").mouseover(function(){ 
 
    //alert('111'); 
 
    $(document.body).append('<br> 111'); 
 
}); 
 

 
$("input#textUpload").mouseover(function(){ 
 
    //alert('222'); 
 
    $(document.body).append('<br> 222'); 
 
}); 
 

 
$("#textUpload").mouseover(function(){ 
 
    //alert('333'); 
 
    $(document.body).append('<br> 333'); 
 
}); 
 

 
$("#textUpload").click(function(){ 
 
    //alert('444'); 
 
    $(document.body).append('<br> 444'); 
 
}); 
 

 
$("#textUpload").on('click', function(event) { 
 
    //alert('555'); 
 
    $(document.body).append('<br> 555'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="text" id="textUpload"> 
 
<input type="text" id="textUpload2" value="" />

Edited JSFiddle