jQuery的html()可以给现在元素附加新的元素,innerHTML也可以,那么,如何给这些新生成的元素绑定事件呢?直接在元素还未生成前就绑定肯定是无效的,因为所绑定的元素目前根本不存在。
然而,jQuery为我们提供了一个函数来解决这个问题,它就是.live(),它可以给所有元素绑定事件,不论是已有的,还是将来生成的,比如:
$(‘#div’).live(‘click’,function(){
//do stuff
});
它还可以同时绑定多个事件:$('.hoverme').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
// do something on mouseover
} else {
// do something on mouseout
}
});
【实例】
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">
</script>
<html>
<body>
<input type="button" name="input[]" value="按钮1" />
<input type="button" name="input[]" value="按钮2" />
<input type="button" name="input[]" value="按钮3" />
<a id="add">添加</a>
</body>
</html>
<script type="text/javascript">
$("#add").click(function() {
var inp = $(":input:last").clone();
$(":input:last").after(inp);
})
// 为每一个button绑定onclick事件,alert一下
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = function() {
alert("我测试一下");
}
}
$(':input').live('click',function() {
alert("我再测");
});
</script>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">
</script>
<html>
<body>
<input type="button" name="input[]" value="按钮1" />
<input type="button" name="input[]" value="按钮2" />
<input type="button" name="input[]" value="按钮3" />
<a id="add">添加</a>
</body>
</html>
<script type="text/javascript">
$("#add").click(function() {
var inp = $(":input:last").clone();
inp2 = inp.val("按钮"+($(":input").length+1));
inp3 = inp2.attr("id","a"+($(":input").length+1))
$(":input:last").after(inp3);
})
//为每一个button绑定onclick事件,alert一下
//var inputs = document.getElementsByTagName("input");
//预先加载,inputs.length最大等于3
for (var i = 0; i < 99; i++) {
$("#a"+i).live('click',function(){
alert($(this).val());
})
}
$(':input').live('click',function() {
alert($(this).val());
});
</script>
分享到:
相关推荐
本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要...
在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <ul></ul> 假设我们要给ul动态添加的绑定click事件形成如下结果 <li name=apple>apple <li name=pear>pear [removed] function test...
本文实例讲述了jQuery动态生成的元素绑定事件操作。分享给大家供大家参考,具体如下: 这段时间在写代码的时候遇到一个问题,通过append()添加的节点,点击事件不起作用。当时我百思不得其解,各种找错都没找到错误...
我们知道在jQuery中,动态生成一个元素,如果要在动态生成元素的同时,动态绑定事件,可以通过live/on方法(在jquery3.0中已经废除了bind方法)。 2 . 在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在...
用jquery的时候你会发现,页面渲染后动态生成的dom,在生成之前的代码是没办法取到相应对象的,必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据。 html: <input type=text v-model...
之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下: 1. 事件...
jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果。大家看看源码就知道了。生成的按钮基数项on方法点击无效live方法有效。 比如页面上有下边两个...
jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果。大家看看源码就知道了。
今天在写JQUERY时遇到个问题:当使用脚本动态添加元素xxx时,但事件$(“.x .y”).click(function)…失效问题。 刚开始网上找到了用live函数,方法如下: 事件绑定:$(“.x .y”).click(function) 需改为: 代码如下:...
jQuery live()方法是给所有匹配的元素附加一个事件处理函数,即使这个元素是以后通过append,prepend,after等事件生成后的内容也依然有效。 这个方法可以看做是 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配...
对于动态生成的元素,bind绑定的事件 也无法触发,需要通过jQuery提供的另外一个方法 .live() 这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加...
用jQuery的append()方法动态添加了一段html代码之后,发现在为新添加的元素绑定click事件时无法获取该新元素。 二、解决方法 度娘推荐的方法基本是用live()方法 live()的官方定义和用法: live() 方法为...
以前我都是讲这个插件使用在静态HTML元素中的,今天为动态生成的元素绑定的时候发现不能用了。 常规的用法是这样的: 代码如下: <a>www.jb51.net</a> 代码如下: $(document).ready(function(){
live方法其实是bind方法的变种,其基本功能就同bind方法的功能是一样的,都是为一个元素绑定某个事件,但是bind方法只能给当前存在的元素绑定事件,对于事后采用JS等方式新生成的元素无效,而live方法则正好弥补了...
主要介绍了jQuery实现动态生成表格并为行绑定单击变色动作的方法,涉及jQuery页面元素遍历与事件动态响应相关操作技巧,需要的朋友可以参考下
jQuery使用on()绑定动态生成元素的事件无效的问题 jQuery的on()方法可以绑定动态生成元素的事件,但是在实际使用时发现无效。如下HTML: <a>123 使用如下方式,对静态元素有效,但是绑定动态生成的a元素的事件时...
使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,例如append等。 之前使用 on 的时候一直是 $().on('click','function(){ }') 之后发现有些时候一直无法绑定(比如元素动态生成时),查看文档后发现...