jquery生成元素并绑定事件

最新推荐文章于 2022-07-27 21:15:19 发布

雪狼MJ

最新推荐文章于 2022-07-27 21:15:19 发布

阅读量668

点赞数

分类专栏：编程心得 JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/tonybest985/article/details/45307989

版权

编程心得同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

JQuery

5 篇文章 0 订阅

订阅专栏

场景：在一个大类的下面添加单元内容
具体需求：在当前页面中插入一个input和button，input为输入内容，button为提交。
上代码，先构建个demo
页面内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> jquery添加元素并绑定事件</title>
    <style type="text/css">
        div{
            border:1px solid red;
            width:100px;
            height:100px;
            display:inline-block;
            margin:20px;
        }
    </style>
    <script type="text/javascript" src="../common/jquery.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
        <div class="one"></div>

        <div class="two"></div>

        <div class="three"></div>

</body>
</html>

首先引入jquery，然后创建3个div

第一个需求是给相应的内容添加元素，经常用的有append方法，但我们也会遇到给选定的位置前面添加，给后面添加等不同的需求，正好jquery是全部都有。
append方法，给指定位置内部添加元素
before方法，给指定位置前面添加元素
after方法，给指定位置后面添加元素

$(document).ready(function(){
    var str = "<button class='test'>我是天津的</button>";

    $('.one').append(str);

    $('.two').before(str);

    $('.three').after(str);

});

生成的代码：


        <div class="one"><button class="test">我是天津的</button></div>

        <button class="test">我是天津的</button><div class="two"></div>

        <div class="three"></div><button class="test">我是天津的</button>

第二个需求是给生成的按钮绑定事件
这里用到jquery的bind方法
bind(type, [data], function) 其中data可选
我们用到的是button的click方法，所以给button绑定click方法。完整的代码：

$(document).ready(function(){
    var str = "<button class='test'>我是天津的</button>";

    $('.one').append(str);

    $('.two').before(str);

    $('.three').after(str);

    $('.one').bind('click', test);

});

function test(){
    var str = "that's right";

    $(this).after(str);
}

点击button后生成的代码：


        <div class="one"><button class="test">我是天津的</button></div>that's right

        <button class="test">我是天津的</button><div class="two"></div>

        <div class="three"></div><button class="test">我是天津的</button>

OK，nice，搞定。

雪狼MJ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery生成元素并绑定事件

场景：在一个大类的下面添加单元内容具体需求：在当前页面中插入一个input和button，input为输入内容，button为提交。上代码，先构建个demo 页面内容：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title> jquery添加元素并绑定事件</title> <styl
复制链接

扫一扫