jQuery 的on()方法

一、总结

一句话总结:

1、普通添加事件:$("a").on("click", function () {执行的代码})
2、未创建元素:$("body").on("click", "a", function (e) {执行的代码})
3、传递参数:$("p").on("click", { "txt": "文本" }, function (e) {$("a").text(e.data.txt);})

1、jquery的on方法给元素添加事件?

$("a").on("click", function () {执行的代码})
$("a").on("click", function () {
console.log(0)
})

2、jquery的on方法给未创建的元素添加事件?

$("body").on("click", "a", function (e) {执行的代码})
$("body").on("click", "a", function (e) {

});

3、jquery的on方法传递参数?

$("p").on("click", { "txt": "文本" }, function (e) {$("a").text(e.data.txt);})
$("p").on("click", { "txt": "文本" }, function (e) {
$("a").text(e.data.txt);
})

4、jquery的on方法 给未创建的元素添加事件 实例?

给新添加的元素hidden_panel类添加点击事件:$("body").on("click", ".hidden_panel", function (e) { 执行的代码 });
<script>
$(function () {
$("body").on("click", ".hidden_panel", function (e) {
$(this).children(".panel-body").toggle();
$(this).children(".panel-footer").toggle();
$(this).find(".panel-heading_symbol_left").toggle();
$(this).find(".panel-heading_symbol_down").toggle();
});
});
</script>

二、jQuery on()方法使用

转自或参考:jQuery on()方法使用
https://www.cnblogs.com/sntetwt/p/10758176.html

jQuery on()方法
基本语法:
语法结构一:

$(selector).on(event,function)

语法结构二:

$(selector).on(events,[selector],[data],function)

语法结构三:

$(selector).on(object,[selector],[data])

  

结构一:

$("a").on("click", function () {
console.log(0)
})

结构二[selector],适用于未创建的元素

$("body").on("click", "a", function (e) {

});

结构二[data],函数传递:

$("p").on("click", { "txt": "文本" }, function (e) {
$("a").text(e.data.txt);
})

结构三{object},绑定不同函数:

$("p").on({
click: function () { $(this).css("color", "green"); },
mouseover: function () { $(this).css("color", "red"); },
mouseout: function () { $(this).css("color", "black"); },
});

off()方法,解除绑定

$("body").on("click","a",function(){
$("a").off("click");
})

one()方法,绑定一次

$("a").one("click",function(){

});

trigger()方法,关联事件

$("p").click(function () {
$("a").trigger("click");
});
$("a").on("click", function () {
console.log(0)
});

  

  

  

 

jQuery 的on()方法的更多相关文章

  1. jquery 通过submit()方法 提交表单示例

    jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...

  2. jquery.on()超级方法

    $.on()方法是jquery1.7之后的一个超级方法,将事件绑定和事件委托整合到一个函数中去,支持绑定多个事件,并且可以绑定自定义事件.使用起来很方便. demo传送门 事件委托 首先说一下事件委托 ...

  3. 重写jquery的ajax方法

    //首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...

  4. jQuery的extend方法

    jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({})  ,为jQuery类添加方法,可以理解为扩 ...

  5. jQuery中eq()方法用法实例

    本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...

  6. HTML 5 的自定义 data-* 属性和jquery的data()方法的使用

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...

  7. 深度理解Jquery 中 offset() 方法

    参考原文:深度理解Jquery 中 offset() 方法

  8. [转]jQuery的each方法的几种常用的用法

    下面提一下jQuery的each方法的几种常用的用法 复制代码 代码如下:  var arr = [ "one", "two", "three&quo ...

  9. jquery中$.ajax方法提交表单

    function postdata(){                        //提交数据函数 $.ajax({                                //调用jqu ...

  10. JS,JQuery的扩展方法

    转 http://blog.csdn.net/tuwen/article/details/11464693 //JS的扩展方法: 1 定义类静态方法扩展 2 定义类对象方法扩展            ...

随机推荐

  1. Linux服务器centos7系统下搭建Jenkins

    Jenkins是什么? Jenkins是开源CI&CD软件领导者, 提供超过1000个插件来支持构建.部署.自动化, 满足任何项目的需要. 所以现在是越来越多的公司都在使用Jenkins做持续 ...

  2. eclipse导入项目后出现红色叉号的解决方案

    对于一名程序员来说,我导入的项目在项目的名称上无端加了一个红色的叉号,虽然这个不友好的符号,对于我整个的项目运行没有任何影响,但是总让我觉得不舒服,大大的叉号写在我的项目的脑袋上,我心里能舒服吗?于是 ...

  3. SuperMemo method

    原文:https://www.supermemo.com/en/archives1990-2015/english/ol/sm2 别人的研究:http://wdxtub.lofter.com/post ...

  4. wsl2 debian安装docker

    应用商店下载debian 安装docker 安装依赖 打开安装好的docker安装依赖 sudo apt-get install apt-transport-https ca-certificates ...

  5. WIN10安装.net报0x800F081F解决方法

    WIN10安装.net2.0和.net3.0报错,错误代码:0x800F081F,解决方法: 方法一:检查服务windows update有无开启,若未开启,开启服务后,再装.net 注:若安装.ne ...

  6. mysql运维相关

    1.为什么要分库分表(设计高并发系统的时候,数据库层面该如何设计)?用过哪些分库分表中间件?不同的分库分表中间件都有什么优点和缺点?2.现在有一个未分库分表的系统,未来要分库分表,如何设计才可以让系统 ...

  7. [唐胡璐]Selenium技巧 - 定制元素属性检查,并写到ReportNG中

    QTP 和Selenium 都会有这种要检查某一个控件元素属性的情况,比如去检查一个Button的显示文字是什么? 为了更方便的书写程序,并优美的显示到HTML测试报告中,做了以下几个小小的封装,只是 ...

  8. Java并发包--ConcurrentLinkedQueue

    转载请注明出处:http://www.cnblogs.com/skywang12345/p/3498995.html ConcurrentLinkedQueue介绍 ConcurrentLinkedQ ...

  9. 设置 IntelliJ IDEA 主题

    一.选择File选项====>Settings====>Appearance====>Theme====>三选一切换主题

  10. c++类的基本形式(一个简单类的简单sample,命名空间)

    有人把类说成是占用固定大小内存块的别名,其定义时不占用空间 #include<iostream> #include<string> using namespace std; c ...