文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

python测试开发django-167. jQuery中append() 动态新增的元素 click 事件无效的解决办法

前言 使用append新增的div元素，绑定click事件无效的几种解决办法 遇到问题 绑定select下拉框click事件 // 绑定select下拉框click事件...}) 新增的div上点击事件没监听到 主要原因是事件是在 dom 加载的时候就已经完成了，新增的 div 元素 click 事件就无效了。...使用live live()函数会给被选的元素绑定上一个或者多个事件处理程序，并且规定当这些事件发生时运行的函数。 通过live()函数适用于匹配选择器的当前及未来的元素。...}) 看到网上很多都是用的live方法，但是会报错：TypeError: $(…).live is not a function 主要原因是jquery中的live()方法在jquery1.9...使用on 接下来还是使用on的方法，把点击事件绑定到它父元素上，这样就可以了 // 绑定select下拉框click事件 $('#cards').on('click',

1.3K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    02-老马jQuery教程-jQuery事件处理

    当用于 select 元素时，change 事件会在选择某个选项时发生。...当用于 text field 或 text area 时，该事件会在元素失去焦点时发生 mousedown([[data],fn]) $("p").mousedown(fn); 当鼠标指针移动到元素上方...参数： type:添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。 data:将要传递给事件处理函数的数据映射 fn:每当事件触发时执行的函数。...], fn) 说明：jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。...参数: selector:选择器字符串，用于过滤器触发事件的元素。 type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

    7.6K00

    02-老马jQuery教程-jQuery事件处理

    当用于 select 元素时，change 事件会在选择某个选项时发生。...当用于 text field 或 text area 时，该事件会在元素失去焦点时发生 mousedown([[data],fn]) $("p").mousedown(fn); 当鼠标指针移动到元素上方...含义：为每个匹配元素的特定事件绑定事件处理函数。在绑定事件之前，一定要确保页面中的DOM元素已经就绪。如果没有就绪或者后面动态添加的DOM元素则不会动态更新事件处理程序。..., fn) 说明：jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。...参数: selector:选择器字符串，用于过滤器触发事件的元素。 type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

    3.7K80

    杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

    offsetParent(),返回第一个匹配元素用于定位的父节点。 •这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。...事件冒泡可能会引起预料之外的效果,上例中,本来只想触发元素 的click事件,然而 元素和元素的click事件也同时被触 发了.因此有必要对事件的作用范围进行限制.当单击元素时,只 触发元素的click...事件,而不触发 和元素上的 click事件.当单击 元素时,只触发 元素上的click事件, 而不触发元素上的click事件....当鼠标移出这个元素时，会触发指定的第二个函数 toggle(fn,fn2,[fn3,fn4,…])用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件 hover 在mouseover...•页面初次加载时不需要加载全部的javascript文件，在需要时动态加载 jQuery.getJSON(url, [data], [callback]) 通过 HTTP GET 请求载入 JSON

    10.2K20

    jquery要怎么写才能速度最快？（转…

    为了获取这个属性，必须连续两次调用jQuery，第一次是$(this)，第二次是attr('id')。 事实上，这种处理完全不必要。...$('div').find('h3').eq(2).html('Hello'); 采用链式写法时，jQuery自动缓存每一步的结果，因此比非链式写法要快。...比如，有一个表格（table元素），里面有100个格子（td元素），现在要求在每个格子上面绑定一个点击事件（click），请问是否需要将下面的命令执行100次？ 　　...唯一的区别在于，.delegate()是当事件冒泡到指定的父元素时触发，.live()则是当事件冒泡到文档的根元素后触 发，因此.delegate()比.live()稍快一点。...此外，这两种方法相比传统的.bind()方法还有一个好处，那就是对动态插入的元素也有效，.bind()只对已经存在的DOM元素有效，对动态插入的元素无效。

    2.1K30

    jQuery最佳实践

    为了获取这个属性，必须连续两次调用jQuery，第一次是$(this)，第二次是attr('id')。 事实上，这种处理完全不必要。...$('div').find('h3').eq(2).html('Hello'); 采用链式写法时，jQuery自动缓存每一步的结果，因此比非链式写法要快。...$("td").bind("click", function(){ $(this).toggleClass("click"); }); 回答是不需要，我们只要把这个事件绑定在table元素上面就可以了，...唯一的区别在于，.delegate()是当事件冒泡到指定的父元素时触发，.live()则是当事件冒泡到文档的根元素后触发，因此.delegate()比.live()稍快一点。...此外，这两种方法相比传统的.bind()方法还有一个好处，那就是对动态插入的元素也有效，.bind()只对已经存在的DOM元素有效，对动态插入的元素无效。 根据测试，委托处理比不委托处理，快了几十倍。

    1.7K20

    4-Jquery学习四-事件操作

    即使是执行live()函数之后新添加的元素，只要它匹配当前jQuery对象的选择器，绑定的事件处理函数仍然对其有效。 要删除通过live()绑定的事件，请使用die()函数。...6,delegate delegate()函数用于为指定元素的一个或多个事件绑定事件处理函数。 即使是执行delegate()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数仍然对其有效。...事件： // 只有第一次点击时，执行该事件处理函数 // 执行后one()会立即移除绑定的事件处理函数 $("#btn").one("click", function(){ alert("只弹出一次提示框...= { id: 5, name: "张三" , hidden : 20}; // 只有第一次点击时，执行该事件处理函数 // 执行后one()会立即移除绑定的事件处理函数 $("#btn").one("...该函数也可用于触发resize事件。此外，你还可以额外传递给事件处理函数一些数据。 resize事件会在元素的尺寸大小被调整时触发。该事件常用于window对象(浏览器窗口)或框架页面。

    5.4K90

    JavaScript（19）jQuery HTML 获取和设置内容和属性

    jQuery HTML jQuery 拥有可操作 HTML 元素和属性的强慷慨法。 jQuery DOM 操作 jQuery 中非常重要的部分，就是操作 DOM 的能力。...jQuery 提供一系列与 DOM 相关的方法，这使訪问和操作元素和属性变得非常easy。...jQuery HTML – 获得内容和属性 获得内容 – text()、html() 以及 val() 三个简单有用的用于 DOM 操作的 jQuery 方法： text() – 设置或返回所选元素的文本内容...("Value: " + $("#test").val()); }); 获取属性 – attr() jQuery attr() 方法用于获取属性值。...target=”view_window” 当用户第一次选择内容列表中的某个链接时，浏览器将打开一个新的窗体，将它标记为 “view_window”，然后在当中显示希望显示的文档内容。

    2.2K10

    04-老马jQuery教程-DOM节点操作及位置和大小

    语法结构： jQuery(html, [props]) 参数: html:用于动态创建DOM元素的HTML标记字符串，注意标签尽量闭合。...参数: html， String类型，HTML标记代码字符串，用于动态生成元素并包裹目标元素 element， Element类型，用于包装目标元素的DOM元素。...参数 html， String类型，HTML标记代码字符串，用于动态生成元素并包装目标元素 elem， Element类型，用于包装目标元素的DOM元素 示例 $("p").wrapAll("元素均有效。 参数： optionsBoolean默认值:'false'，设置为 true 时，计算边距在内。 示例 元素均有效。 参数:optionsBoolean默认值:'false',设置为 true 时，计算边距在内。 示例 获取第一段落外部宽度。

    7K00

    04-老马jQuery教程-DOM节点操作及位置和大小

    语法结构： jQuery(html, [props]) 参数: html:用于动态创建DOM元素的HTML标记字符串，注意标签尽量闭合。...参数: html， String类型，HTML标记代码字符串，用于动态生成元素并包裹目标元素 element， Element类型，用于包装目标元素的DOM元素。...参数 html， String类型，HTML标记代码字符串，用于动态生成元素并包装目标元素 elem， Element类型，用于包装目标元素的DOM元素 示例 $("p").wrapAll("...此方法对可见和隐藏元素均有效。 参数： optionsBoolean默认值:'false'，设置为 true 时，计算边距在内。 示例 元素均有效。 参数:optionsBoolean默认值:'false',设置为 true 时，计算边距在内。 示例 获取第一段落外部宽度。

    3K90

    jQuery中on()、bind()、live()、delegate()之间的区别

    事件冒泡 当我们点击一个链接时，其触发了链接元素的单击事件，该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。...；jquery1.7版本出现之后用于替代bind()，live()绑定事件方式； event 必需项；添加到元素的一个或多个事件，例如 click,dblclick等； 单事件处理：例如 $(selector...; }); 当我们在a 上面点击的时候，首先会触发它本身所绑定的click事件，然后会一路往上，触发它的父元素，祖先元素上所有绑定的click事件。...它会绑定事件到所有的选出来的元素上 它不会绑定到在它执行完后动态添加的那些元素上 当元素很多时，会出现效率问题 当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题 2 .live()...data来决定那个子元素来匹配，但是因为你可以决定放在那个根元素上，所以可以有效的减小你所要查找的元素 可以用在动态添加的元素上 缺点 需要查找那个那个元素上发生了那个事件了，尽管比document少很多了

    1.8K30

    【Java 进阶篇】深入浅出：JQuery 事件绑定的奇妙世界

    事件绑定是指在特定的 HTML 元素上设置一个监听器，用于捕捉用户触发的事件（比如点击、输入、鼠标移动等），并执行相应的操作。在 JQuery 中，事件绑定通常使用 on 方法来完成。...创造奇迹：动态绑定与解绑 在实际开发中，我们经常面临动态添加或移除元素的情况。对于这样的场景，JQuery 提供了动态事件绑定与解绑的方法，让你能够随心所欲地处理事件。...动态事件绑定 动态事件绑定是指在页面加载后，通过代码向元素添加事件监听器。这在处理动态生成的元素或在特定条件下才需要绑定事件的元素时非常有用。让我们通过一个简单的例子来演示动态事件绑定： 点击我 // 静态事件绑定（在页面加载时就存在的元素） $("#myButton").on("click...动态事件解绑 与动态事件绑定相对应的是动态事件解绑，即在页面加载后，通过代码解除元素的事件监听器。这在需要取消已绑定事件或在元素被移除时清理事件监听器时非常有用。

    1.3K10

    如何实现动态添加的元素添加点击事件

    在页面开发过程中常常遇到需要动态添加元素，然后给这一元素绑定相关事件的情况，这种情况下一般需要给元素加上相关属性，然后写这些元素的事件函数即可。动态添加的元素怎么绑定事件呢？...该事件附加到staticAncestors应处理的元素的静态父级 ( )。 每次在此元素或后代元素之一上触发事件时，都会触发此 jQuery 处理程序。...然后处理程序检查触发事件的元素是否与您的选择器 ( dynamicChild)匹配。当匹配时，您的自定义处理程序函数将被执行。...尽管记住document可能不是最有效的选择。...例如 $('.buttons').on('click', 'button', function(){ // do something here }); 将适用于 <!

    5.6K20

    我碰到的那些面试题js及es6(1)

    4、在子元素上设置，transform: translate(-50%, -50%); 用于平面的2D转换，后面的百分比以自身的宽高为参考，定位后将元素的左上角置于父级中央，之后再用 transform...如果在浏览器端生成Cookie，默认是关闭浏览器后失效除非被清除，否则永久保存仅在当前会话下有效，关闭页面或浏览器后被清除存放数据大小4K左右一般为5MB与服务器端通信每次都会携带在HTTP头中，如果使用...2、click本身是方法作用是触发onclick事件，只要执行了元素的click()方法，就会触发onclick事件 3、click可以理解为一次简单的触发，只执行一次，找不到以后就不再执行； 4、onclick...创建出的一个元素如何给他写绑定事件 $(document).on("click","strong",function(){ //动态创建事件绑定 $(this).parent().remove() })...2.存储量：cookie存储量小，一般在4到8kb,其余存储量大5M 3.数据有效期不同， sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保存 localStorage

    2.7K21
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券