选择器ID和功能:为什么不工作?

时间:2015-05-06 18:46:38

标签: jquery

选择器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/

1 个答案:

答案 0 :(得分:3)

type="text"id="之间似乎有一个奇怪的字符。它看起来像一个空间但不是。删除它并替换为空格可修复代码。 (编辑:Chrome检查员将其显示为&nbsp;

我认为第一个选择器工作的原因是因为它是唯一一个按类型选择而不是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