jqueryon()ajax首次没反应,解决jQueryajax动态新增节点无法触发点击事件的问题...

解决jQuery ajax动态新增节点无法触发点击事件的问题

在写ajax加载数据的时候发现&＃xff0c;后面添加进来的demo节点元素&＃xff0c;失去了之前的点击事件。为什么点击事件失效&＃xff0c;我们该怎么去解决呢?

其实最简单的方法就是直接在标签中写οnclick&＃61;""&＃xff0c;但是这样写其实是有点low的&＃xff0c;最好的方式还是通过给类名绑定一个click事件。

解决jQuery ajax动态新增节点无法触发事件问题的两种解决方法&＃xff0c;为了达到更好的演示效果&＃xff0c;假设在某个页面的body下有以下结构的代码&＃xff1a;

• a1
• a2
• a3

$("#demo").click(function(){

$("#demo").append(&＃39;

});

方法一&＃xff1a;使用live&＃xff1a;

live()函数会给被选的元素绑定上一个或者多个事件处理程序&＃xff0c;并且规定当这些事件发生时运行的函数。通过live()函数适用于匹配选择器的当前及未来的元素。比如&＃xff0c;通过脚本动态创建的元素。

实现如下&＃xff1a;

$(&＃39;.demo1&＃39;).live(&＃39;click&＃39;, function(){

alert(&＃39;OK&＃39;);

});

方法二&＃xff1a;使用on&＃xff1a;

可以通过on方法绑定事件&＃xff0c;可以绑定到它的父级或者body中&＃xff0c;实现如下&＃xff1a;

$("#demo").on(&＃39;click&＃39;,&＃39;.demol&＃39;,function(){

alert(&＃39;OK&＃39;)

});

通过上面的两种方法&＃xff0c;都可以解决jQuery ajax动态新增节点无法触发点击事件的问题。知道方法了&＃xff0c;赶紧的试试吧。

以上所述是小编给大家介绍的解决jQuery ajax动态新增节点无法触发点击事件的问题&＃xff0c;希望对大家有所帮助&＃xff0c;如果大家有任何疑问请给我留言&＃xff0c;小编会及时回复大家的。在此也非常感谢大家对我们网站的支持&＃xff01;

时间&＃xff1a; 2017-05-22

谈论jquery中bind(),live(),delegate(),on()绑定事件方式 1&＃xff0e; Bind() $(selector).bind(event,data,function) Event:必须项;添加到元素的一个或多个事件. Data:可选;需要传递的参数 Function:必需;当绑定事件发生时,需要执行的函数; 定义事件: $(selector).bind({event1:function, event2:function, ...}): 2.live() $(selector).

早上要做一功能,checkbox被选中时,显示隐藏的层,取消选中时,再隐藏选中的层. 初始代码如下: 代码如下: $(function(){ $("#ischange").change(function() { alert("checked"); }); }); 捣腾了半天,竟然一点反应都没有.百度了下,有高人指出上面几行代码在Firefox等浏览器中可以正常运行,即你选中复选框或取消复选框都会弹出一个对话框,但是在IE中却不会正常执行,即选中或取消复选框

jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也移除) live()--------------------------版本号小于1.7(在Jquery1.7中已经移除,相应die()也移除) delegate()-------------------版本号小于1.7(在Jquery1.7中已经移除) on()------------------

本文实例讲述了jQuery中复合属性选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配同时满足多个属性条件的元素. 语法结构: 代码如下: [selector1][selector2][selectorN] 参数列表: 参数 描述 selector1 属性选择器. selector2 另一个属性选择器,用以进一步缩小范围. selectorN 任意多个属性选择器,也是用来缩小范围. 实例代码: 代码如下:

一. 复合选择器对checkbox的相关操作

我们要执行的任务是页面起初有一部分图片,我们在底下有一个More Photos的链接,点击后,向当前页面后加载一部分图片,再点击该链接,继续加载,直到将我们列出的页面加载完成,此时该链接也消失了. 首先效果图如下: 这个只截取了最底下的一部分页面.在鼠标悬停在图片上时,还会有文字出现,鼠标移出时文字消失. 我们现在要做的就是点击底下的MorePhotos链接时,再加载一部分数据,然后再点击在加载一部分数据,直到数据加载完. 首先body中代码如下: