欢迎使用CSDN-markdown编辑器

最新推荐文章于 2024-09-24 16:30:27 发布

蓝翔技工学院挖掘机专业学长

最新推荐文章于 2024-09-24 16:30:27 发布

阅读量255

点赞数

分类专栏：前后交互 markdown 文章标签：编辑器

本文链接：https://blog.csdn.net/u011705307/article/details/51473221

版权

前后交互同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

markdown

1 篇文章 0 订阅

订阅专栏

Jquery的on语法

$(selector).on(event,childSelector,data,function,map)

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data	可选。规定传递到函数的额外数据。
function	可选。规定当事件发生时运行的函数。
map	规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

解决方法：

on方法中要先找到原选择器（父容器例：body）,再找到动态添加的选择器（子元素例：.add,按class类名选择)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.3.js"></script>
    <style>
        p{display: block;margin: 30px 0px;background: #CCCCCC;}
    </style>
    <script>

        $(function(){
            $("body").on("click",".add",function(){
                $(this).css("background","#999");
            });
            $("#test").click(function(){
                $("body").append("<p class='add'>11111</p>")
            })
        })

    </script>
</head>
<body>
<p class="add">11111</p>
<button id="test">测试</button>
</body>
</html>