jquery on事件疑问

Question

今天一个网页需要动态插入输入框。

html<ul id = "input_item">
 <li><input type=text> <input type=number></li>
</ul>

需要在点击最后一个input的时候插入一个li来准备下次输入。使用on事件绑定。

javascriptul = $("#input_item");
$("#input_item").on("click",  "input:last", function(){
        createInput();
    });

上面这样写能正确找到最后一个input。但是如果这样写

javascriptul = $("#input_item");
$("#input_item “input:last").on("click", function(){
        createInput();
    });

则只会简单的将事件绑定到第一个li的最后一个input。
请问这里区别产生的原因是什么

Answer 1

$("#input_item").on("click", "input:last", function(){
        createInput();
});

//是一个动态绑定的过程，是事件到达#input_item后，在判断target元素是否符合input:last，再决定是否执行相应函数

$("#input_item input:last").on("click", function(){
        createInput();
});

//是一个静态绑定的过程，一开始就绑定了，也就是$("#input_item input:last") 就计算出了具体的DOM元素。createInput添加的的不会被绑定

Answer 2

$("#input_item").on("click",  "input:last", function(){
        createInput();
});

on事件是绑定在$("#input_item")上的,触发点击后再寻找"input:last"

$("#input_item “input:last").on("click", function(){
        createInput();
});

on事件是绑定在$("#input_item “input:last")

Answer 3

首先，两种绑定事件的方式。

$("#input_item").on("click",  "input:last", function(){
        createInput();
    });

这种是使用代理，事件绑定在#input_item上，这样每次点击到这个元素会过滤一下，如果是input:last就会触发。

$("#input_item input:last").on("click", function(){
        createInput();
    });

这种是直接将事件绑定在input上，只要点击到这个元素就会触发。

明白这两种绑定事件的方式的差别，再来回答楼主的问题：为什么下面这种方式只会绑定到第一个li的最后一个input?产生区别的原因是什么？

在画面加载完成之后，画面默认有一个li下面有input,这个时候其实event的事件绑定已经执行完了。

由于在画面上只有一个li下面有input，所以第二种方式下，只有这个input才会绑定事件。至于后面新增的第二个li，并没有绑定事件(可以简单得理解成代码执行的时候还没有这个元素，有这个元素的时候代码已经执行完了)，除非你在createInput()之后再给新生成的元素再绑定一次事件。

第二种方式下，事件是绑定在#input_item, 点击下面的任何子元素都会触发，但是如果加了过滤元素则只有满足过滤selector，才会执行事件处理程序。所以不管li是新生成的还是原来有的，都会触发这个事件，并且满足input:last就会执行事件处理程序。
综上所述，一般这种情况这种情况都会使用代理，可以有效减少画面事件绑定的数量。