您的位置:首页 > Web前端 > JQuery

Jquery解决动态加入的新元素后事件无法响应的问题

2014-06-04 12:22 731 查看
原因:我个人理解为,当网页加载时动态的元素不存在所以,而事件的加载不能加载到未来或者不存在的元素,因此动态添加的元素其自身没有事件响应这时候可以用两种方法来解决。

第一种方法:

再添加的元素后面进行事件绑定,

这里主要使用的是bind()方法,对动态添加的元素绑定事件

举例:

foreach ($res as $value){

echo '<li><input type="checkbox" name="ng" value="'.$value['id'].'"/>'.$value['name'].'</li>';

}

echo '<script language="javascript"> $("input[name=ng]").bind("click",function(){

var arr = new Array();

$("input[name=ng]:checked").each(function(key,value){arr[key]=$(value).val();});

$("#xx").val(arr.join(","));

}); </script>';

第二种方法:

个人感觉这种方法比较方便,但需要注意的是这个方法是在jQuery高级版本才有,低版本里面没有这个方法:

使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)



举例:

(1)html:

<div style="background-color:red">

<p>这是一个段落。</p>

<button>请点击这里</button>

</div>

jquery:

$("div").delegate("button","click",function(){

$("p").slideToggle();

});

(2)delegate()方法:

$("table").delegate("td", "hover", function(){ $(this).toggleClass("hover");});

</div>

live()方法:

$("table").each(function(){ $("td", this).live("hover", function(){ $(this).toggleClass("hover"); }); });

delegate()这个方法可作为live()方法的替代,使得每次事件绑定到特定的DOM元素。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐