jquery 匹配第一个元素并绑定事件

Question

exp:
<div id="test">
<ul>
  <li><input name="name[]" type="text" value="" /></li>
   <li><input name="sex[]" type="text" value="" /></li></ul>
//注意一下，以下的ul元素是clone出来的
<ul>
  <li><input name="name[]" type="text" value="" /></li>
   <li><input name="sex[]" type="text" value="" /></li>
</ul>
</div>
---------script--------------
<script>
$(function(){
$("#test > ul:eq(0) > li > input:eq(0)").bind({
  focus:function(){
   alert('绑定了鼠标移动事件');
  },
  blur:function(){
    alert('绑定了鼠标离开事件');
  }
})
})
</script>这些都没有问题，问题是，当我鼠标移到第二个ul的第一个input的时候，事件也有效了，我这里不需要有效，请问有什么方法可以改进

Answer 1

$(function(){
$("#test ul:first li :input:first").bind({
  focus:function(){
   alert('绑定了鼠标移动事件');
  },
  blur:function(){
    alert('绑定了鼠标离开事件');
  }
})
})

Answer 2

楼上不行，eq(1)中的input也会触发事件

Answer 3

绝对只有第一个name[]会触发,sex[]你说触发了，肯定是name[]失去焦点时，你是点去sex[]。其实弹出来的是name[]的事件。你自己仔细看清楚了

Answer 4

总共四个输入框，你测试不清楚的话，你从下往上去点，下面三个你怎么点都没反应的，只有到了第一个对
focus和blur事件会有响应

Answer 5

呵呵，楼上，你理解错我的意思了<div id="test">
<ul>
  <li><input name="name[]" type="text" value="" /></li>
   <li><input name="sex[]" type="text" value="" /></li></ul>
//注意一下，以下的ul元素是clone出来的
<ul>
  <li><input name="name[]" type="text" value="" /></li>
   <li><input name="sex[]" type="text" value="" /></li>
</ul>
</div>我只想在第一个ul中的第一个input中绑定事件第二个ul是我用jquery clone出来的，明白不？但是我点第二个ul的第一个input也会触发事件，我现在不需要，只要在第一个ul中的input触发就行了，clone出来的都不需要触发事件

Answer 6

我没理解错你的意思。就是只有第一个ul中的第一个input被绑定事件了。你自己测试的时候看清楚，你直接去第二个ul中的第一个input，它focus会有响应？你肯定是先点了第一个ul的第一个input，然后弹出来focus的响应事件，然后直接又去点第二个ul的第一个input了，又看到弹出对话框，就以为这个也绑定了，你看清楚，弹出来的是第一个ul的第一个input的blur事件

Answer 7

是的，你说的没错，不管怎么样测试，先点还是后点，第二个ul中的第一个input也会响应。这就是我头疼的地方

Answer 8

    <div id="test">
<ul>
  <li><input name="name[]" type="text" id="n1" value="" /></li>
   <li><input name="sex[]" type="text" value="" /></li></ul>
//注意一下，以下的ul元素是clone出来的
<ul>
  <li><input name="name[]" type="text" id="n2" value="" /></li>
   <li><input name="sex[]" type="text" value="" /></li>
</ul>
</div>
<script>
$(function(){
$("#test ul:first li :input:first").bind({
  focus:function(){
   alert($(this).attr("id")+'：focus事件被激活');
  },
  blur:function(){
    alert($(this).attr("id")+'：blur事件被激活');
  }
})})
</script>我给第一个ul的input的ID命名为n1，第二个ul的第一个input命名为n2；自己看清楚吧

Answer 9

我真是崩溃。第一个ul的第一个input你绑定的是blur,也就是说你鼠标离开它，在任意地方点击，都将执行被绑定的blur事件。跟第二个什么的有个毛关系呀

Answer 10

我就不清楚了我这个input，不能加id，因为是clone出来的。加了id，就会很麻烦了，要改好多地方我传上去让你看一下吧，你就知道了

Answer 11

鬼让你去加ID了，我加ID只是让你看清楚，到底是哪个input的事件被激活

Answer 12

对，我也是这样认为的，但目前情况就是这样，很迷茫，第二个ul中的第一个input也会响应事件，可爱吧

Answer 13

我真是跟你扯不清楚了。你拿下面的代码去测试。第二个ul的name[]还会被绑定事件？你自己看看清楚弹出来的对话框，看清楚ID到底是哪一个
<div id="test">
<ul>
  <li><input name="name[]" type="text" id="n1" value="" /></li>
  <li><input name="sex[]" type="text" value="" /></li></ul>
//注意一下，以下的ul元素是clone出来的
<ul>
  <li><input name="name[]" type="text" id="n2" value="" /></li>
  <li><input name="sex[]" type="text" value="" /></li>
</ul>
</div>
<script>
$(function(){
$("#test ul:first li :input:first").bind({
  focus:function(){
  alert($(this).attr("id")+'：focus事件被激活');
  },
  blur:function(){
  alert($(this).attr("id")+'：blur事件被激活');
  }
})})
</script>

Answer 14

把你的代码单独拿出来测试是正确的，第二个没有反应我在想不是我clone的原因，我自己再琢磨琢磨吧

Answer 15

解决了，就是clone的原因，因为我第二个clone出来的，默认也绑定了事件我是用unbind("focus")解除了邦定我在想，clone出来后，绑定第一个事件的时候，是不是要把所有的元素都重新each一下，然后再重新绑定呢？

Answer 16

<div id="test">
    <ul>
        <li><input name="name[]" type="text" value="" /></li>
        <li><input name="sex[]" type="text" value="" /></li>
    </ul>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $("#test ul").clone().appendTo("#test");//先克隆后绑定
        $("#test ul:eq(0) li:eq(0) input").bind({
            focus:function(){
                alert('绑定了鼠标移动事件');
            },
            blur:function(){
                alert('绑定了鼠标离开事件');
            }
        })
    })
</script>

Answer 17

楼上牛x，一针见血，指出问题所在我绕了半天，结果还是解除绑定有效，就没有想到先clone再绑定

Answer 18

好吧，楼上，我错了。因为我第一个需要响应，其他的ul是根据第一个clone出来的，我是用click再clone，所以有点小小的误差了我还是老老实实的去除绑定吧