为动态添加的元素绑定事件

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("body").on(‘click‘,‘p‘,function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>如果您点击我，我会消失。</p>
<p>点击我，我会消失。</p>
<p>也要点击我哦。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>如果您点击我，我会消失。</p>
<p>点击我，我会消失。</p>
<p>也要点击我哦。</p>
</body>
</html>

注意1,2代码区别，方式1，后期动态添加的<p>标签是可以点击消失的，方式2不行

原文地址：https://www.cnblogs.com/zhaogaojian/p/12326004.html

时间： 2024-10-13 05:29:05

为动态添加的元素绑定事件的相关文章

jQuery给动态添加的元素绑定事件的方法

jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这里介绍jQuery中如何给动态添加的元素绑定事件在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况例如 1 <div id="testdiv"> 2 <ul></ul> 3 </div> 需要给<ul>里面动态添加的

jQuery-为动态添加的元素绑定事件

样例: $("#modify_nick").click(function () { $(this).css("display","none"); $("#nickname_span").empty(); var input = document.createElement("input"); $(input).attr("type", "text"); $(input

WEB前端技巧之JQuery为动态添加的元素绑定事件

jquery 为动态添加的元素绑定事件如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上可以用delegate来实现 .delegate( selector, eventType, handler ) 例如示例: $('someUlSelector').delegate('someLiSelector','click',function(){ //codes... //$(this) for the current jquery instance of

jQuery对动态添加的元素绑定事件（on()的用法）

从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代码的时候就注册了相应绑定的事件,我们平常用jQuery给HTML标签绑定(单击)事件是一般这样写 $("#btnId").click(function () { //触发事件后逻辑 }); 但是对用js动态添加的元素是无效的,即没有绑定单击事件,所以对于动态添加的标签需要用on()来

如何用js为动态生成的元素绑定事件

今天在开发项目的时候,需要为用js动态生成的元素绑定一个click事件,但是在页面加载之前,这个元素不存在,没法获取这个元素,然后为其添加事件.查阅jquery api 发现可以用on()事件(注意:新版本的jquery已经把live()去除,现在用on()),为动态生产的元素绑定事件,然后触发该事件执行.比如下面一个例子: 假设我们要给div动态添加的span绑定click事件形成如下结果 x //做法如下: ("#choose_result").on("click&quo

jQuery动态添加的元素绑定事件处理函数代码

jQuery动态添加的元素绑定事件处理函数代码作者: 字体:[增加减小] 类型:转载有一段时间没用jquery了,今天又碰到这个问题.当时是知道有livejquery可以解决.但是我并不喜欢为了这个而另外加载一个. 我当时的处理方法是在添加的时候手工绑定事件处理函数.不过新版的jquery已经添加了这个功能.我们已经不需要为此烦恼了. 参考:http://api.jquery.com/live/ 以前我们定义事件,比如为元素定义单击事件是这样写的: 复制代码代码如下: $('input'

Angular如何给动态生成的元素绑定事件

在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular.module('myapp',[]) .directive('myText',function(){ return{ restrict:'A', template:'<div ng-click="hello()">Hi everyone</div>', link:

jquery动态添加的元素绑定的事件不生效的问题

我们可以通过 $(document).on('click', '#xxx', callback) 这种形式解决. 原因,一般情况下,我们是通过 $('#xxx').click(callback) 这种形式去绑定,这种绑定之所以生效是因为,我们程序加载 $(function(){}) 的时候绑定了回调,而动态添加上去的,我们并没有去绑定. 所以动态添加的元素,点击的时候并不会触发我们想要的效果.但是实际上,在我们点击的时候,还是产生了点击事件,只是这个事件没有被我们的预期回调处理,因为我们的回调没

jq动态添加的元素触发事件无效

<div class='a'> <div class='b'> </div> 其中$('.a')是html页面的元素,$('.b')是jq动态添加的元素.$(".b").click(function(){})方法失效原来jq中动态添加的元素不能直接使用$(".b").click(function(){});的方法,要使用$(".a").on('click','.b',function(){}); $(&quo