jquery里的on和click的使用方法

这次给大家带来jquery里的on和click的使用方法,使用jquery里的on与click的注意事项有哪些,下面就是实战案例,一起来看一下。

使用jQuery写js时,有些用on写行为函数,有些用click,弄清二者区别很重要。

以下是用于测试二者区别的HTML代码。

  

展示jQuery中on()和click()的区别

点击生成新按钮。NewOn生成的Delete按钮行为用on()实现,NewClick生成的Delete按钮行为用click()实现。

  • 原先的HTML元素on
  • 原先的HTML元素click

登录后复制

js文件如下:

$("#newclick").click(function(){  $(".li").append('
  • 动态添加的HTML元素click
  • '); });$("#newon").click(function(){ $(".li").append('
  • 动态添加的HTML元素on
  • '); });$(".delete").click(function(){ $(this).parent().remove(); }); $(".li").on('click', ".deleteon", function(){ $(this).parent().remove(); })$(".deleteclick").click(function(){ $(this).parent().remove(); });

    登录后复制

    页面加载后,点击NewOn和NewClick按钮,页面如下图所示。

    jquery里的on和click的使用方法

    现象:

    原先的HTML元素点击其身后的Delete按钮就会被删除。而动态添加的HTML元素,使用click()这种写法,点击Delete按钮无法删除;使用On()方式可以。

    原因:

    element.click()这种写法不支持给动态元素或样式绑定事件。支持给动态元素绑定事件的是.live()和.on()。live在jQquery1.7后就不推荐使用了。使用.on()时注意,on前面的元素必须在页面加载的时候就存在DOM里面。

    相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

    推荐阅读:

    layui中的树形关于取值传值详解

    ajax请求data会遇到哪些问题

    jquery实现点击a链接后此链接变为自定义色效果

    以上就是jquery里的on和click的使用方法的详细内容,更多请关注【创想鸟】其它相关文章!

    版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

    发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2782581.html

    (0)
    上一篇 2025年3月8日 16:33:35
    下一篇 2025年3月8日 16:33:40

    AD推荐 黄金广告位招租... 更多推荐

    相关推荐

    • jQuery运行页面怎样默认触发点击事件

      这次给大家带来jQuery运行页面怎样默认触发点击事件,实现jQuery运行页面默认触发点击事件的注意事项有哪些,下面就是实战案例,一起来看一下。 例如: 1. $(“#txt”).trigger(“cl…

      编程技术 2025年3月8日
      200
    • jquery的插件怎么打印页面内容

      这次给大家带来jquery的插件怎么打印页面内容,jquery的插件怎么打印页面内容注意事项有哪些,下面就是实战案例,一起来看一下。 业务场景 客户需要在页面有一个打印按钮,点击之后可以打印Echarts图表的内容以及文字提示信息,经谷歌搜…

      2025年3月8日
      200
    • Jquery ajax异步跨域怎么实现

      这次给大家带来Jquery ajax异步跨域怎么实现,Jquery ajax异步跨域实现的注意事项有哪些,下面就是实战案例,一起来看一下。 如何快速解决JS或Jquery ajax异步跨域的问题呢?下面小编就为大家分享一篇快速解决Jquer…

      编程技术 2025年3月8日
      200
    • jQuery的复选框选择并且获取值

      这次给大家带来jquery的复选框选择并且获取值,jquery复选框选择并且获取值的注意事项有哪些,下面就是实战案例,一起来看一下。 一、checkbox选择 在jQuery中,选中checkbox通用的两种方式: $(“#cb1”).at…

      2025年3月8日
      200
    • JQuery操作table中tr的位置

      这次给大家带来JQuery操作table中tr的位置,JQuery操作table中tr的位置的注意事项有哪些,下面就是实战案例,一起来看一下。 表格样式 登录后复制 js代码 // 上移 function moveUp(obj) { var…

      编程技术 2025年3月8日
      200
    • jquery的表单验证提交

      这次给大家带来jquery的表单验证提交,jquery表单验证提交的注意事项有哪些,下面就是实战案例,一起来看一下。 说明: 1. 代码中的js脚本文件路径需替换为自己的目录文件 2. 代码中加入了ajax验证账号是否存在 表单验证font…

      编程技术 2025年3月8日
      200
    • jquery trigger函数无法触发a标签应该如何处理

      这次给大家带来jquery trigger函数无法触发a标签应该如何处理,处理jquery trigger函数无法触发a标签的注意事项有哪些,下面就是实战案例,一起来看一下。 起因:点击icon图标后要触发a标签的链接转跳动作,但是用 JQ…

      编程技术 2025年3月8日
      200
    • 如何用jQuery封装animate.css代码

      这次给大家带来如何用jQuery封装animate.css代码,用jQuery封装animate.css代码的注意事项有哪些,下面就是实战案例,一起来看一下。 animate.css是一个有趣的,跨浏览器的css3动画库。 一、首先引入an…

      编程技术 2025年3月8日
      200
    • jquery怎样做出分页效果

      这次给大家带来jquery怎样做出分页效果,使用jquery做出分页效果的注意事项有哪些,下面就是实战案例,一起来看一下。 基于jquery.page.js的一款简单的分页效果,供大家参考,具体内容如下 简单的jQuery分页插件 *{ m…

      编程技术 2025年3月8日
      200
    • jquery动态合并单元格

      这次给大家带来jquery动态合并单元格,jquery动态合并单元格的注意事项有哪些,下面就是实战案例,一起来看一下。 如下所示: ////在table的第二行的位置添加一行:var tbl_elm = $(“#dgList”);$(‘xx…

      编程技术 2025年3月8日
      200

    发表回复

    登录后才能评论