学习使用jQuery中的on() 方法

小咪咪 2022-09-05 12:56 171阅读 0赞

### 学习使用jQuery中的on方法 ###

*   *  向 p元素添加 click 事件处理程序
     *  定义和用法

## 向 p元素添加 click 事件处理程序 ##

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
    <script> $(document).ready(function(){ $(".input-btn").on("click",function(){ var url = $(this).attr('data-url'); alert("奇葩天地网："+url); }); }); </script>
    </head>
    <body>
    <p class="input-btn" data-url="www.qipa250.com">我是奇葩天地网。</p>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70]

## 定义和用法 ##

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

提示：如需移除事件处理程序，请使用 off() 方法。

提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70]: /images/20220829/ad0c81cbdac1445da2bf6d46c79615f4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，171人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery中.live()方法的使用方法

jquery动态生成的页面元素添加事件？使用livequery插件，或可以使用jquery的live方法。摘录一段live简单使用方法。更多详情还见官网 [http:...

谁践踏了优雅/ 2024年04月17日 05:21/ 0 赞/ 85 阅读

相关 jQuery中on方法的优势及使用示例

jQuery是一种广泛应用于Web开发的JavaScript库，提供了许多简化操作和增强功能的工具函数。其中，on方法是jQuery中事件处理的核心方法之一，它提供了一种简洁而

深藏阁楼爱情的钟/ 2024年02月29日 05:29/ 0 赞/ 67 阅读

相关学习使用jQuery中的hover方法

学习使用jQuery中的hover方法定义和用法语法实例定义和用法 hover() 方法规定当鼠标指针悬停在被选元

Love The Way You Lie/ 2022年09月10日 10:22/ 0 赞/ 179 阅读

相关学习使用jQuery中的on() 方法

学习使用jQuery中的on方法向 p元素添加 click 事件处理程序定义和用法向 p元素添加 click 事件处理程序

小咪咪/ 2022年09月05日 12:56/ 0 赞/ 172 阅读

相关 jquery on()方法及其参数使用

1.定义 on() 方法在被选元素及子元素上添加一个或多个事件处理程序。 2.语法 $( selector).on( event,childSelect

柔光的暖阳◎/ 2022年08月19日 11:25/ 0 赞/ 207 阅读

相关 jquery one方法实现

jquery中有一个方法：one，用途是事件绑定只执行一次就自动解除绑定。源码看了很久头晕，决定自己搞一个。研究了很久，用原生的模拟了一次。我用的名字是once。

太过爱你忘了你带给我的痛/ 2022年08月18日 12:04/ 0 赞/ 168 阅读

相关 jquery on方法详解

[http://www.365mini.com/page/jquery-on.htm][http_www.365mini.com_page_jquery-on.htm] [

墨蓝/ 2022年07月28日 05:10/ 0 赞/ 190 阅读

相关 jQuery中 (function($){…})(jQuery)方法使用

刚刚学习jQuery看到这个方法有点蒙圈，代表什么意思呢？我们从JavaScript中匿名函数说起： JavaScript中匿名函数的声明与调用 function(ar

「爱情、让人受尽委屈。」/ 2022年06月11日 06:44/ 0 赞/ 194 阅读

相关 jQuery中的on方法详细介绍

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。如需移除事件处理程序，请使用 off() 方法。如需添加只运行一次的事件然后移除，请使用 one(

忘是亡心i/ 2022年05月22日 07:58/ 0 赞/ 232 阅读

相关 jQuery on() 方法

实例向 `<p>` 元素添加 `click` 事件处理程序： $(document).ready(function(){ $("p").on("

我会带着你远行/ 2021年06月26日 16:06/ 0 赞/ 441 阅读