$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count++; }
以上代码执行时,点击#check_all时,alert一直没反应,后在网上查资料时,才知道on前面的元素也必须在页面加载的时候就存在于dom里面, 那原话是这样的:
支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on,使用on的时候也要注意,on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等,可以放在on的第二个参数里面。
因为我先输出相关html,再执行就没问题了。
<div class="row"><div class="col-xs-12"><div class="control-group"><label class="control-label bolder blue">选择镇街</label><div class="row"><div class="checkbox col-xs-1"><label><input type="checkbox" class="checkbox" id="check_all" /><span class="lbl">全区</span></label></div><div id="check_item"><div class="checkbox col-xs-1 "><label><input name="towm'+count+'" type="checkbox" class="checkbox" /><span class="lbl">西南街道</span></label></div><div class="checkbox col-xs-1 "><label><input name="towm'+count+'" type="checkbox" class="checkbox" /><span class="lbl">云东海街道</span></label></div><div class="checkbox col-xs-1"><label><input name="towm'+count+'" type="checkbox" class="checkbox" /><span class="lbl">白坭镇</span></label></div><div class="checkbox col-xs-1"><label class="block"><input name="towm'+count+'" type="checkbox" class="checkbox" /><span class="lbl">乐平镇</span></label></div><div class="checkbox col-xs-1"><label class="block"><input name="towm'+count+'" type="checkbox" class="checkbox" /><span class="lbl">大塘镇</span></label></div><div class="checkbox col-xs-1"><label class="block"><input name="towm'+count+'" type="checkbox" class="checkbox" /><span class="lbl">芦苞镇</span></label></div><div class="checkbox col-xs-1"><label class="block"><input name="towm'+count+'" type="checkbox" class="checkbox" /><span class="lbl">南山镇</span></label></div></div></div></div></div></div><hr />'; $('#check_all').on('click' , function(){ var that = this; $('#check_item').find('input:checkbox') .each(function(){ alert(2); this.checked = that.checked; $(this).closest('.col-xs-1').toggleClass('selected'); }); });
下面看下jquery on() 方法绑定动态元素
jQuery on()方法是官方推荐的绑定事件的一个方法。使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,例如append等。
<div id="test"> <div class="evt">evt1</div> </div>
错误的用法,下面方法只为第一个class 为 evt 的div 绑定了click事件,使用append动态创建的div则没有绑定
<script> // 先绑定事件再添加div $('#test .evt').on('click', function() {alert($(this).text())}); $('#test').append('<div class="evt">evt2</div>'); </script>
正确的用法如下:
<script> $('body').on('click', '#test .evt', function() {alert($(this).text())}); $('#test').append('<div class="evt">evt2</div>'); </script>
以上所述是小编给大家介绍的jQuery on()方法绑定动态元素的点击事件无响应的解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
jquery绑定动态元素
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。