专注WEB开发 分享经验,沉淀知识

jquery on如何给未来元素绑定事件?

 作者:chenxing  时间:2017-08-22 23:15  评论:

我们跳出问题设定的思维陷阱,把元素绑在未来元素的父级上,那么这个问题就迎刃而解了。

jquery on

我们要想在一个元素上绑定一个事件,那么这个元素必须先存在,也就是绑定事件动作前就已有这个元素。

这是一个给元素绑定任何事件的前提。

如果按照这种思路走,那么“给未来元素绑定事件”将会是一个死胡同。

我们跳出问题设定的思维陷阱,把元素绑在未来元素的父级上,那么这个问题就迎刃而解了。

demo如下:

html部分代码

<ul class="menu">
    <li class="son">php</li>
    <li class="son">javascript</li>
</ul>
<button class="add">添加菜单</button>

js部分代码

$('button.add').click(function(){
    $('<li class="son">mysql</li>').appendTo('ul.menu');
})

//给li绑定click事件
//记住不要把事件直接绑定在son元素上$('.son').on('click',function(){})
//正确的姿态:
$('.menu').on('click', '.son', function(){
    alert('正在进入...');
})

ok,拿这个demo尝试一下,是不是未来添加的几个菜单项都被绑定了点击事件了呢?没错,jquery on 绑定未来事件就是这么简单。

除特别注明外,本站所有文章均为作者原创。 或分享自己的编程经验,或探讨工作中的问题,或聊以人生趣事。 转载请注明出处来自 http://www.qiusuoweb.com/74.html

发布评论

 提交评论
有人回复时邮件通知我

 评论(0)

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

PHP一个接口如何批量请求第三方接口

 2022-08-08 22:47  233

Mac目录如何快速返回上一级?

 2022-07-21 17:27  431

Mac目录和终端如何快速切换

 2022-07-21 17:11  167

phpstorm一个窗口打开多个项目?

 2022-07-20 17:15  234

 最新评论

 诚心: 09月29日 23:01
学到了
来源: 如何一次性推送百万级别的消息
 Nick: 04月14日 12:26
网上的资料还是太老,都只是取一个元素,解决了一大难题
来源: redis set集合取出一组数据并删除
 skywalker: 11月03日 18:21
简洁明了
来源: mysql 获取某个日期的前一天或后一天
 lisheng: 05月09日 19:26
兴哥牛B加油哈兴哥成功的道路上你又进了一步 哈哈
来源: 一年时间又回到这里
 心态炸裂: 03月24日 10:54
No3.blindcomfirm 多了一个l,望改正!!!
来源: 微信小程序获取input值的总结
 666666: 11月08日 13:49
66666
来源: 一年时间又回到这里