Jquery on() 动态绑定事件

之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态生成的标签点击了没反应,而live方法却能够支持;

jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果。

$("#table").on("click","a",function(){

  //do something

})

如下:当我动态添加一行时,不要考虑再重新在a上去绑定事件

<table class="table table-bordered mrg_0" id="table">
    <thead>
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>编辑</th>
        </tr>
    </thead>
    <tbody>
        <tr id="2">
            <td>2</td>
            <td>CBA</td>
            <td><a href="javascript:" class="link btn btn-danger btn-sm" data-oper="del" >删除</a>

        <a href="javascript:void(0)" class="link btn btn-primary btn-sm" data-oper="modify">修改</a>

    </td>
        </tr>
    </tbody>
</table>

时间: 2024-10-26 07:34:24

Jquery on() 动态绑定事件的相关文章

javascript与jquery动态绑定事件需要先加载页面注意的坑

1.javascript的Dom对象动态事件绑定注意以下2点,如:document.getElementById("id名称").addListenerEvent("事件名称",function(){代码},false),动态绑定事件,事件名称不加on,如:click,mouseover等. (1)如果<script>绑定代码</script>写在<body>html代码</body>前面,则必须先使用加载页面语句wi

jquery json遍历和动态绑定事件

<div id='tmpselectorList' style='border: 1px solid grey;max-height: 150px;position:absolute;text-align: left; overflow: auto;background:white;width:153px;'> </div> <script type="text/javascript"> $(document).ready(function () {

jQuery中的事件与动画 (你的明天Via Via)

众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, 通过种种事件实现各项功能或执行某项操作.事件在元素对象与功能代码中起着重要的桥梁作用. 在jQuery中,事件总体分为两大类:简单事件和复合事件. jQuery中的简单事件,与JavaScript中的事件几乎一样,都含有window事件.鼠标事件.键盘事件.表单事件等, 只是其对应的方法名称有略微不

Jquery基础之事件操作

事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事件处理机制,极大的增强了事件处理的能力. 一.DOM加载事件 页面加载完毕后浏览器会通过javascript为Dom元素加载事件,使用Javascript时候使用的是window.onload方法,而Jquery使用的是$(document).ready()方法,下表 展示两个事件的异同.    w

设置获得的标签体、动态绑定事件以及Ajax

前言 主要谈谈Ajax以及jQuery对Ajax的支持 Ajax(Asynchronous javascript  and xml)以异步地方式实现局部HTML的刷新.创建交互式web应用程序而无需牺牲浏览器兼容性的流行方法. 正文 设置获得的标签体 动态绑定事件 方式一 方式二 例子 Ajax 1.Ajax是一种在2005年由Google推广开来的编程模式,是一种使用现有标准的新方法通过Ajax,可以创建更好.更快以及更友好的web应用程序. 2.Ajax基于javascript和HTTP请求

jQuery插件 -- 动态事件绑定插件jquery.livequery.js

http://blog.csdn.net/zzq58157383/article/details/7721974 动态事件绑定插件livequery, 可以利用它给相应的DOM元素注册事件或者触发回调函数.不仅当选择器匹配的元素会被绑定事件,而且后来通过JavaScript添加的元素都会被绑定事件.当元素不再和选择器匹配时,livequery会自动取消事件注册,使得开发者不再需要关注HTML元素的来源,只需要关注如何编写其绑定的事件即可 通过jQuery选择器选择一个DOM元素,livequer

jQuery完整的事件委托(on())

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery完整的事件委托(on())</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> &l

jQuery中的事件和动画

一.jQuery中的事件 加载DOM 在JS中等待页面加载完成通常使用window.onload方法,而在jQuery中则使用$(document).ready()方法来替代传统的window.onload方法.这两者有很大的不同: 执行时机 window.onload方法是在网页所有的元素(包括元素关联的文件)完全加载到浏览器后才能执行.而Query中的$(document).ready()方法,在DOM载入就绪就可以对其操纵并调用它绑定的函数,此时网页中的所有元素可能并没有下载完毕. 有时我

锋利的jQuery读书笔记---jQuery中的事件

jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../