方法绑定动态成分的点击事件无响应的消除办法,jQuery协理动态参数将函数绑定到事件上的秘技

By admin in 4858美高梅 on 2019年7月21日

本文实例陈述了jQuery协助动态参数将函数绑定到事件上的方法。分享给大家供大家参谋。具体解析如下:

$('#check_all').on('click' , function(){
alert(1);
});
$("#yujinlist").append(html);
count++; 
} 

jQuery on()方法是合法推荐的绑定事件的三个方法。使用 on()
方法能够给现在动态创设的动态成分绑定内定的事件,比如append等。

复制代码 代码如下:

上面包车型客车js代码提供了三种办法用于绑定函数到事件,在那之中措施二足以传递动态参数,特别实用

以上代码实践时,点击#check_all时,alert从来没影响,后在网络查资料时,才通晓on前边的成分也务必在页面加载的时候就存在于dom里面,
那原话是如此的:

前面使用 on 的时候平昔是

(function($)
{
$.extend({

//方法一
$('#foo').click(function(event) {
  alert('User clicked on "foo."');
}); 

//方法二, 支持动态传参
$('#foo').bind('click', {test1:"abc", test2:"123"}, function(event) {
  alert('User clicked on "foo."' + event.data.test1 + event.data.test2);
});

支撑给动态成分和品质绑定事件的是live和on,个中live在JQUEMuranoY
1.7自此就不推荐使用了。今后主要用on,使用on的时候也要细心,on后边的因素也必须在页面加载的时候就存在于dom里面。动态的成分大概样式等,能够放在on的第2个参数里面。

$("").on('click','function(){ 
}') 

key_fn:[]方法绑定动态成分的点击事件无响应的消除办法,jQuery协理动态参数将函数绑定到事件上的秘技。, //寄存绑定的字符对应的函数
key_code:[], //寄存字符
key_bind:function(ch,callback){
var KeyCode =
{a:65,b:66,c:67,d:68,e:69,f:70,g:71,h:72,i:73,j:74,k:75,l:76,m:77,n:78,o:79,p:80,q:81,r:82,s:83,t:84,u:85,v:86,w:87,x:88,y:89,z:90};

仰望本文所述对大家的jQuery程序设计具有援助。

因为小编先输出相关html,再实行就没问题了。

从此察觉有一些时候一贯无法绑定(举例元素动态生成时),查看文书档案后发觉科学用法应该是

if(KeyCode.hasOwnProperty(ch)){
$.key_fn.push(callback);
$.key_code.push(ch);
//第贰回才必要丰盛事件
if($.key_fn.length == 1){

你只怕感兴趣的稿子:

  • jquery飞速动态绑定键盘事件的操作函数代码
  • jQuery
    on()方法绑定动态成分的点击事件无响应的化解办法
  • jQuery
    on()方法绑定动态成分的点击事件实例代码浅析
  • jQuery页面成分动态增加后绑定事件不见方法,非
    live
  • jquery
    html动态拉长的因素绑定事件详解
  • jQuery
    on()绑定动态成分出现的标题总计
  • jQuery给动态增进的因素绑定事件的方式
  • jquery弹窗插件colorbox绑定动态生成成分的方法
  • jQuery
    绑定事件到动态创制的要素上的方法实例
  • jQuery动态拉长的因素绑定事件处理函数代码
  • 浅谈jQuery西藏中华工程公司作的动态绑定
<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" />\
全区\
</label>\
</div>\
<div id="check_item">\
<div class="checkbox col-xs-1 ">\
<label>\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
西南街道\
</label>\
</div>\
<div class="checkbox col-xs-1 ">\
<label>\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
云东海街道\
</label>\
</div>\
<div class="checkbox col-xs-1">\
<label>\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
白坭镇\
</label>\
</div>\
<div class="checkbox col-xs-1">\
<label class="block">\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
乐平镇\
</label>\
</div>\
<div class="checkbox col-xs-1">\
<label class="block">\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
大塘镇\
</label>\
</div>\
<div class="checkbox col-xs-1">\
<label class="block">\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
芦苞镇\
</label>\
</div>\
<div class="checkbox col-xs-1">\
<label class="block">\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
南山镇\
</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');
});
});
$(document).on("change","#pageSize_out",function(){ 
if($("#page_out").val()!=0){ 
$("#pageSize").val($(this).val()); 
list(); 
} 
}) 

$(document).keypress(function(e){
var e = event || window.event;
var k = e.keyCode || e.which;

上面看下jquery on()
方法绑定动态元素

同时,注意

for(var i =0 ; i < $.key_fn.length ;i++){

jQuery on()方法是合法推荐的绑定事件的三个办法。使用 on()
方法能够给未来动态创造的动态成分绑定钦命的风浪,举例append等。

As this answers receives a lot of attention, here are two supplementary
advises :

// – 32 兼容小写
if(k-32 == KeyCode[$.key_code[i]] || k ==
KeyCode[4858美高梅 ,$.key_code[i]] ){
log(‘pressed binded key ‘+k);
$.key_fn[i]();
break;
}
}

<div id="test">
<div class="evt">evt1</div>
</div>

1) When it’s possible, try to bind the event listener to the most
precise element, to avoid useless event handling.

});
}
}else
{
alert(‘绑定事件只可以是字母’);
}
}

不当的用法,上边方法只为第二个class 为 evt 的div
绑定了click事件,使用append动态成立的div则尚未绑定

That is, if you're adding an element of class b to an existing element of id a, then don't use
$(document.body).on('click', '#a .b', function(){
but use
$('#a').on('click', '.b', function(){

});
})(jQuery);

<script>
// 先绑定事件再添加div
$('#test .evt').on('click', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>

2) Be careful, when you add an element with an id, to ensure you’re not
adding it twice. Not only is it “illegal” in HTML to have two elements
with the same id but it breaks a lot of things. For example a selector
“#c” would retrieve only one element with this id.

选择的时候能够如下

不错的用法如下:

on(events,[selector],[data],fn)

复制代码 代码如下:

<script>
$('body').on('click', '#test .evt', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>

events:二个或三个用空格分隔的风浪类型和可选的命名空间,如”click”或”keydown.myPlugin”

selector:三个抉择器字符串用于过滤器的触及事件的精选器成分的子孙。即使选取器为null或简捷,当它达到选定的要素,事件三翻五次触发。

$.key_bind(‘f’,set_table_full_screen);
$.key_bind(‘r’,reloadthis);

上述所述是作者给大家介绍的jQuery
on()方法绑定动态成分的点击事件无响应的化解办法,希望对大家全数帮助,倘使我们有任何疑问请给自家留言,小编会及时复苏咱们的。在此也极其感激我们对台本之家网址的扶助!

data:当叁个事件被触发时要传递event.data给事件管理函数。

突发性大家需求为使用增多一些飞快格局,每趟都去写多少个底下的代码,通过key_bin正是有助于的绑定有个别键盘和和呼应的操作函数了。

您或然感兴趣的小说:

  • jquery神速动态绑定键盘事件的操作函数代码
  • jQuery
    on()方法绑定动态成分的点击事件实例代码浅析
  • jQuery页面成分动态增进后绑定事件不见方法,非
    live
  • jquery
    html动态增加的要素绑定事件详解
  • jQuery
    on()绑定动态成分出现的主题素材总括
  • jQuery扶助动态参数将函数绑定到事件上的办法
  • jQuery给动态增进的要素绑定事件的章程
  • jquery弹窗插件colorbox绑定动态生成元素的方法
  • jQuery
    绑定事件到动态创设的要素上的主意实例
  • jQuery动态增进的成分绑定事件管理函数代码
  • 浅谈jQuery江苏中华南理工科业余大学学学程公司作的动态绑定

fn:该事件被触发时试行的函数。 false
值也得以做贰个函数的简写,再次来到false。

复制代码 代码如下:

替换bind()

$(document).keypress(function(){})

当第4个参数’selector’为null时,on()和bind()其实在用法上基本上并未有另外差异了,所以大家能够感觉on()只是比bind()多了二个可选的’selector’参数,所以on()可以拾分有益的换掉bind()

您大概感兴趣的作品:

  • jQuery
    on()方法绑定动态成分的点击事件无响应的消除办法
  • jQuery
    on()方法绑定动态成分的点击事件实例代码浅析
  • jQuery页面成分动态拉长后绑定事件不见方法,非
    live
  • jquery
    html动态增加的成分绑定事件详解
  • jQuery
    on()绑定动态成分出现的难题总结
  • jQuery帮助动态参数将函数绑定到事件上的格局
  • jQuery给动态增进的因素绑定事件的法子
  • jquery弹窗插件colorbox绑定动态生成成分的章程
  • jQuery
    绑定事件到动态创立的因素上的方法实例
  • jQuery动态增进的成分绑定事件管理函数代码
  • 浅谈jQuery山东中华南理艺术大学程集团作的动态绑定

替换live()

在1.4事先相信大家特别垂怜使用live(),因为它能够把事件绑定到当下以及后来增添的要素上边,当然在1.4事后delegate()也能够做类似的思想政治工作了。live()的准则非常粗大略,它是通过document实行事件委派的,由此大家也得以采纳on()通过将事件绑定到document来达到live()同样的功能。

live()写法

代码如下:

$('#list li').live('click', '#list li', function() {
//function code here.
}); 

on()写法

代码如下:

$(document).on('click', '#list li', function() {
//function code here.
});

此地的要紧正是第二个参数’selector’在起效果了。它是三个过滤器的效率,只有被选相月素的后代元素才会接触事件。

替换delegate()

delegate()是1.4引进的,目标是透过祖先成分来代劳委派后代成分的平地风波绑定难点,某种程度上和live()优点相似。只然则live()是透过document成分委会派,而delegate则可以是不管三七二十一的祖宗节点。使用on()完成代理的写法和delegate()基本一致。

delegate()的写法

代码如下:

$('#list').delegate('li', 'click', function() {
//function code here.
});

on()写法

代码如下:

$('#list').on('click', 'li', function() {
//function code here.
});

一般第二个和首个参数的逐个颠倒了一晃,别的基本雷同。

总结

jQuery推出on()的指标有2个,一是为了统一接口,二是为着提升品质,所以从现行反革命启幕用on()替换bind(),
live(),
delegate吧。尤其是绝不再用live()了,因为它曾经处在不推荐使用列表了,随时会被干掉。假如只绑定一遍事件,这随着用one()吧,这一个没有变动。

jquery on() 方法绑定动态成分

废话十分少说了,直接给大家贴代码了。

<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火速动态绑定键盘事件的操作函数代码
  • jQuery
    on()方法绑定动态成分的点击事件无响应的化解办法
  • jQuery
    on()方法绑定动态成分的点击事件实例代码浅析
  • jQuery页面成分动态拉长后绑定事件不见方法,非
    live
  • jquery
    html动态增加的要素绑定事件详解
  • jQuery协理动态参数将函数绑定到事件上的秘诀
  • jQuery给动态拉长的因素绑定事件的措施
  • jquery弹窗插件colorbox绑定动态生成成分的法子
  • jQuery
    绑定事件到动态创设的因素上的方法实例
  • jQuery动态增进的要素绑定事件管理函数代码
  • 浅谈jQuery西藏中华南理理大学程公司作的动态绑定

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有