$("#XXX").click()和$("#YYY").on("click","指定的元素",function(){});的区别(jQuery动态绑定事件)

时间：2021-07-12 16:16:43
　　　　　　//绑定 下一页 的点击事件

         $("a[aria-label='Next']").click(function(){

             $("a[aria-label='Previous']").show();

             if(page.pageNo == page.totalPage - 1){

                 $("a[aria-label='Next']").hide();

             }else{

                 $("a[aria-label='Next']").show();

             }

             page.pageNo++;

             page.pageSet(bindData , page);

         });  

         //上面的.click()绑定点击事件 和 下面的 $(document).on("click",".pagination li:gt(0):not(:last)",function(){});的区别在于：

         //.click只能为页面现有的元素绑定点击事件，如果是动态生成的新的元素，是没有事件的
//而$(document).on("click","指定的元素",function(){});方法则是将指定的事件绑定在document上，
       //而新产生的元素如果符合指定的元素，
         //那就触发此事件  

         //为动态生成的 页码按钮 添加 点击事件

         $(document).on("click",".pagination li:gt(0):not(:last)",function(){

             page.pageNo = $(this).text();

             $("a[aria-label='Previous']").show();

             $("a[aria-label='Next']").show();

             if(page.pageNo == "1"){

                 $("a[aria-label='Previous']").hide();

             }

             if(page.pageNo == page.totalPage){

                 $("a[aria-label='Next']").hide();

             }  

             page.pageSet(bindData , page);

         });

结论:

上面的.click()绑定点击事件 和 下面的 $(document).on("click",".pagination li:gt(0):not(:last)",function(){});的区别在于：

1》》.click只能为页面现有的元素绑定点击事件，如果是动态生成的新的元素，是没有事件的

2》》而$(document).on("click","指定的元素",function(){});方法则是将指定的事件绑定在document上，而新产生的元素如果符合指定的元素，那就触发此事件

随机推荐

  1. AppFog免费云空间申请及安装wordpress(图文教程)

    AppFog是一家提供运算平台的服务,用户可以在上面搭建自己的Web App.原本它的名字为PHPFog,但在采用了Cloud Foundry的代码作为核心,支持多个编程语言后,选择了更名.AppFo ...

  2. C# 标准差计算

    if (numberList.Any()) { exEntity.MinValue = numberList.First().NumberValue.ToString(); exEntity.MaxV ...

  3. (甲)PAT-1001

    1001. A+B Format (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B   Calculate a + b and output the sum ...

  4. 转 Android学习笔记： 学习过程中碰到的一些问题及解决方法

    在学习Android开发的过程中遇到了不少的问题,所幸的是最终经过上网查询都得到了解决.现在将我在学习Android开发过程中遇到的一些问题及解决的方法整理如下. 1.R.java不能实时更新 问题描 ...

  5. SAP HANA中创建层次分析视图(Hierarchy Analytic View)

    1. 创建层次Attribute View: ATTR_PRODUCT_HIERACHY ref:  http://www.cnblogs.com/omygod/archive/2013/04/30/ ...

  6. linux下目录简介——/SElinux

    一.前言 安全增强型 Linux(Security-Enhanced Linux)简称 SELinux,它是一个 Linux 内核模块,也是 Linux 的一个安全子系统. SELinux 主要由美国 ...

  7. TCP/IP协议（一）网络基础知识 网络七层协议

    参考书籍为<图解tcp/ip>-第五版.这篇随笔,主要内容还是TCP/IP所必备的基础知识,包括计算机与网络发展的历史及标准化过程(简述).OSI参考模型.网络概念的本质.网络构建的设备等 ...

  8. dedecms wap 上一篇 下一篇 链接出错

    打开 \include\arc.archives.class.php 文件 大约在839 行,查找  $mlink = 'view.php?aid='.$preRow['id'];        修改 ...

  9. Emit学习笔记

    1,给字段设置值,并返回 static void Main(string[] args) { //给字段设置值,并返回 AssemblyName assemblyName = new Assembly ...

  10. 【设计模式】—— 解释器模式Interpret

    前言:[模式总览]——————————by xingoo 模式意图 自定义某种语言后,给定一种文法标准,定义解释器,进行解析. 做过搜索的朋友们可能更了解一些,平时我们搜索所需要的词库,通常就需要用这 ...

相关文章