javascript - jquery on事件疑问
PHPz
PHPz 2017-04-10 15:37:44
[JavaScript讨论组]

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

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。
请问这里区别产生的原因是什么

PHPz
PHPz

学习是最好的投资!

全部回复(3)
阿神
$("#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添加的的不会被绑定

怪我咯
$("#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")

天蓬老师

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

$("#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就会执行事件处理程序。
综上所述,一般这种情况这种情况都会使用代理,可以有效减少画面事件绑定的数量。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号