jquery 的on() 方法绑定了子元素事件，却无法触发。

Question

一段html代码，结构如下图：

.task-list下有多个结构相同的.task-item，每个.task-item下有一个.detail，每个.detail中又有五个子元素。
我想做这样的效果：当鼠标点击.detail下的input.content和textarea.desc时，文本框的背景颜色就变亮。

一开始我尝试了下列各种方法，都没有用

1.选取.detail 全部后代元素的前两个
  $("div.task-list").on("click",".detail > *:lt(2)",function(e){  
        e.target.style.backgroundColor = "#ffffff"; 
    });
2.在.detail层加限定
  $("div.task-list").on("click",".detail:lt(99) > *:lt(2)",function(e){  
        e.target.style.backgroundColor = "#ffffff";
    });
3.在.task-item层再加一层限定
  $("div.task-list").on("click",".task-item:lt(99) > .detail:lt(99) > *:lt(2)",function(e){  
        e.target.style.backgroundColor = "#ffffff";
    });
.............
.............
.............
基本上在选择器里改来改去，结果都是一模一样，那就是：
只有第一条.task-item里的.detail中的文本框点击会变色，
后面的.task.item里的点击无效。

最终后面用了这种简单的办法解决了问题。。。。。。

    $("div.task-list").on("click",".content, .desc",function(e){   
        e.target.style.backgroundColor = "#ffffff"; 
    });

请问jquery的on()方法的childSelector参数是有什么限制吗，或者还是jquery里lt()这种选择器有什么蹊跷。。。
查了好多资料没有看到满意的答案。望各位不吝赐教，谢谢！！！

Answer 1

可以先看下lt方法的使用说明 http://api.jquery.com/lt-sele...
Select all elements at an index less than index within the matched set. 选择匹配集合中所有索引值小于给定index参数的元素。

选择器可以拆分2步分析:

然后加上:lt(2) 自然取到的是

只有第一条.task-item里的.detail中的文本框点击会变色，
后面的.task.item里的点击无效

在线例子https://github.com/huixisheng...

Answer 2

:lt(index)是只返回index个数的元素的，你这样是匹配不到每一个.detail 下面的子元素，举个例子：

<div id="n1">

<div id="n2">
    <ul id="n3">
        <li id="n4">item1</li>
        <li id="n5">item2</li>
        <li id="n6">item3</li>
    </ul>
</div>
<div id="n7">
    <ul id="n8">
        <li id="n9">item1</li>
        <li id="n10">item2</li>
    </ul>
</div>

</div>

// 选择了id分别为n1、n2的两个元素
$("div:lt(2)").showTagInfo(); //DIV#n1 DIV#n2

// 选择了id分别为n4、n5、n6的三个元素
$("ul li:lt(3)").showTagInfo(); //LI#n4 LI#n5 LI#n6

// 选择了id分别为n1、n2的两个元素
$("div li:lt(2)").showTagInfo(); //LI#n4 LI#n5

Answer 3

on都没怎么用过。大都是用delegate

Answer 4

lt选择器，是对其他选择器（如果有）筛选出来的所有结果（不会因为你前面加了几层而在每一层里取前几个），取前index个结果，可以看我这个demo

https://codepen.io/devlee/pen...

Answer 5

为了使后代元素也能够拥有此事件，一般写法为：

$(document).on("#object","event",function(){

})

Answer 6

个人觉得你这里可以用on来解决事情，it貌似多余的
$(".task-lis .task-item .detail input").on({

})
我的话会这么写，你可以试试

Answer 7

这个lt会把.detail下所有的元素聚到一起找到前2个，有些诡异！你可以使用.detail > *:nth-child(-n+2)来选取每个detail的前2个元素