当我请求ajax后,将得到得值添加到 元素id=”launcher_frame_body” 后,在页面怎么也监听不到元素里面的各种事件
$("#launcher_frame_body").append(json.data);
在网上查找资料后,发现从1.9开始要用jquery.on()事件来获取未加载页面元素内容;
对该事件简要讲解
$(selector).on(events,[selector],[data],fn)
参数 | 描述 |
events | 一个或多个用空格分隔的事件类型和可选的命名空间。 |
selector | 可选。一个选择器字符串,用以过滤选定的元素,该选择器的后裔元素将调用处理程序。 如果选择是空或被忽略,当它到达选定的元素,事件总是触发。 |
data | 可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。 |
fn | 该事件被触发时执行的函数。 false值也可以做一个函数的简写,返回false。 |
例:
$("#launcher_frame_body").on("mouseenter",".picBox",function(){ $(this). find(".picBox_in").show() }).on("mouseleave",".picBox",function(){ $(this). find(".picBox_in").hide() })
如果需要用到select的change事件,on暂时不提供该方法,建议用click替代,也可达到同样效果.
这里用个实例来说吧,本来这样写,
$("#select1").click(function(){ $(this).addClass("selected").siblings().removeClass("selected"); if ($(this).hasClass("select-all")) { $("#selectA").remove(); } else { var copyThisA = $(this).clone(); if ($("#selectA").length > 0) { $("#selectA a").html($(this).text()); } else { $(".select-result dl").append(copyThisA.attr("id", "selectA")); } } });
是获取不了数据的,换成如下写法:
$("#select1").on("click","dd",function(){ $(this).addClass("selected").siblings().removeClass("selected"); if ($(this).hasClass("select-all")) { $("#selectA").remove(); } else { var copyThisA = $(this).clone(); if ($("#selectA").length > 0) { $("#selectA a").html($(this).text()); } else { $(".select-result dl").append(copyThisA.attr("id", "selectA")); } } });
这样就能够获取了。
这里顺便说下 $(this) 和 this 区别,$(this) 代表jquery对象,等同通过选择器如$(“#id”)获取的对象;而 this 代表的是html元素本身。
未经允许不得转载:哈勃私语 » jquery采用append 动态添加元素后,获取不到元素对象的情况
本文共1405个字 创建时间:2018年10月27日22:04