探讨jQuery中on和click的使用细节（区别）

时间：2024-11-17 14:22:49

今天在写一个聊天室程序中需要动态地添加和删除一些html元素，因为使用click()的过程中遇到了问题，在一番查阅后找到了问题的根源并改为使用on()成功解决，在此记录分享一下~

????本文目录

  • jQuery 中的on() 方法
  • jQuery 中的click() 方法
  • jQuery中on()和click()实际使用中出现的问题（区别）
  • ????分析总结

jQuery 中的on() 方法

????语法：

$(selector).on( events [, childSelector ] [, data ], handler(eventObject) )
  • 1

events：类型: String
一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", “”, 或者 “.myPlugin”。
childSelector：类型: String
一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件。
data：类型: Anything
当一个事件被触发时，要传递给事件处理函数的。
handler(eventObject)：类型: Function()
事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false。

查看jQuery API 文档中的.on()

✍用法：

  • on() 方法在被选元素（及子元素上）添加一个或多个事件处理函数
  • 自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，简化了 jQuery 代码库，非常推荐使用。
  • 注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

ps：如需移除事件处理程序，请使用 off() 方法。如需添加只运行一次的事件然后移除，请使用 one() 方法。

$(function () {
  $("p").on("click", function () {
    alert("啊，我被点了");
  });
});
  • 1
  • 2
  • 3
  • 4
  • 5

jQuery 中的click() 方法

为 JavaScript 的"click" 事件绑定一个处理器，或者触发元素上的 “click” 事件。

????语法：

$(selector).click( handler(eventObject) )   //为 JavaScript 的"click"事件绑定一个处理器

$(selector).click()   //触发被选元素的"click"事件：
  • 1
  • 2
  • 3

handler(eventObject)：类型: Function()
每次事件触发时会执行的函数

查看jQuery API 文档中的.click()

✍用法：

$(document).ready(function(){
  $("div").click(function(){
    $(this).fadeOut();   //使点击的div消失
  });
});
  • 1
  • 2
  • 3
  • 4
  • 5

— — — — — — — — — — — — — — — — — —

<p onclick="alert('Click 事件被触发')">这是一个段落。</p>
  • 1
$(document).ready(function(){
  $("p").click();
});
  • 1
  • 2
  • 3

jQuery中on()和click()实际使用中出现的问题（区别）

在绑定静态控件时二者并无区别，但是如果面对动态产生的控件，只有 on() 能成功的绑定到动态控件中。下面的例子中原先的 HTML 元素点击其后的删除按钮就能成功删除。而动态添加的 HTML 元素，使用 On() 方法可以成功删除，而使用 click() 方法的点击删除按钮无法删除。
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
</head>

<body>
    <h1>《探究jQuery中on()和click()的区别》 Henry_626</h1>
    <hr>
    <p>
        <span>"新建一个on实现"按钮生成的"删除"按钮行为用on()实现，"新建一个click实现"按钮生成的"删除"按钮行为用click()实现</span>
    </p>
    <div class="test">
        <button id="newOn">新建一个on实现</button>
        <button id="newClick">新建一个click实现</button>
        <hr>
        <div class="list1">
            <span>静态click<button class="delete">删除</button></span>
        </div>
        <hr>
        <div class="list2">
            <span>静态的on<button class="delete">删除</button></span>
        </div>
    </div>

    <script src="/jquery/2.2.4/"></script>
    <script>
        $(function () {
            $("#newClick").click(function () {
                $(".list1").append('<span>动态添加的HTML元素click实现<button class="deleteClick">删除</button></span>');
            });
            $("#newOn").click(function () {
                $(".list2").append('<span>动态添加的HTML元素on实现<button class="deleteOn">删除</button></span>');
            });
            $(".delete").click(function () {
                $(this).parent().remove();
            });

            $(".list2").on('click', ".deleteOn", function () {
                $(this).parent().remove();
            })
            $(".deleteClick").click(function () {
                $(this).parent().remove();
            });
        })
    </script>
</body>

</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51

① 这是运行后的静态html页面：
在这里插入图片描述
② 依次删除使用click()的元素和使用on()的元素：
在这里插入图片描述
③ 点击按钮动态添加 使用click()的元素和使用on()的元素：
在这里插入图片描述

④ 点击"删除"按钮删除刚刚动态添加的元素：
在这里插入图片描述
使用click()方法实现的删除行为无效（大家可以自己把代码复制下来自己运行一下感受感受）。

????分析总结

回到代码本身：
在这里插入图片描述

  • 第一句代码和第三句代码都是用click()方法进行处理的，但是第一句能成功实现，而第三句不能，“delete”是页面初始化时就添加进去的节点的类选择器名，而“deleteClick”是我们可以后期通过脚本实现的功能添加进去的。

这里出现这样的情况究其原因其实并不完全由on()方法和click()造成的，我们想实现的是获取到我们在页面已经加载完毕后添加的节点 ，而这个节点的class或者id可能存在也可能不存在（我们点了添加按钮或是没点、删除了），所以得通过它的直接父节点（这里即外面的class名为“list”的div来找它，然后对它进行操作），click()不能实现这样的功能，采用on()可以很好地解决！！！

$(selector).on( events [, childSelector ] [, data ], handler(eventObject) )
  • 1

即：通过on()或click()绑定的事件只对当前存在的元素有效
.on()前面的元素必须在页面加载的时候就已经存在DOM里
所以下面的这种on()写法和click()效果是一样的，不能实现想要的功能

$(".deleteOn").on('click', function () {
    $(this).parent().remove();
})
  • 1
  • 2
  • 3

将事件绑定到类名为deleteOn的元素的父元素上(事件委托)，注意父元素必须是已经存在DOM里而非后面动态添加的，如下写法，能成功地为动态添加的元素绑定事件：

$(".list2").on('click', ".deleteOn", function () {
    $(this).parent().remove();
})
  • 1
  • 2
  • 3

????小结一下，这次遇到该问题并解决的过程收获很多，不仅仅是解决了这个问题，更重要的是学会并运用了良好的解决问题的步骤：
① 对现象进行多次观察和模拟，分析出问题出现的地方（click()对新添加的节点元素操作不能正常实现）
② 查阅参考资料，官方文档、权威机构教程、博客等（这里自己在看的时候，尤其是博客，一定要有自己的思考，不能盲目相信别人的解释，在处理这个问题的时候我看了好多篇解释不当甚至不能解决问题的博客，所以大家一定要保持清醒的头难，辩证地查阅）
③ 将该问题拓展，举一反三，或是记录下来，加深自己的印象，同时之后再遇到相关问题就不再是问题啦

因为知识及能力有限，如文中有不恰当之处，希望大家积极指正，感谢~

相关文章