文档章节

关于动态生成dom绑定事件的问题

J_Queue
 J_Queue
发布于 2017/08/23 23:23
字数 333
阅读 40
收藏 0

关于动态生成dom绑定事件的问题

使用Jquery的on方法绑定事件,动态生成的DOM也能触发。

需求:给class='tab-close'的元素绑定一个click事件

用法:$(document).on('click', '.tab-close', function(){})

然后分享一个可关闭bootstrap的tab标签页

//HTML代码
<div class="main_container" id="dashboard_page">
    <div>
        <ul id="myTab" class="nav nav-tabs">
            <li class="active">
                <a href="#home" data-toggle="tab">仪表盘<i class="icon-remove tab-close"></i></a>
            </li>
            <li><a href="#ios" data-toggle="tab">文章管理<i class="icon-remove tab-close"></i></a></li>
            <li><a href="javascript:;" id="addTab">add tab</a> </li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="home">
                <p>仪表盘</p>
            </div>
            <div class="tab-pane fade" id="ios">
                <p>文章管理</p>
            </div>
        </div>
    </div>
</div>

//js代码
$(function() {


    var tabCount = 0;
    //添加标签
    $('#addTab').click(function () {
        tabCount++;
        var tabId = 'test'+tabCount;
        var tabName = 'test';
        var newtab = $('<li><a href=#'+tabId+
            ' data-toggle=tab >' + tabName +
            '<i class="icon-remove tab-close"></i></a></li>');
        $('#myTab').append(newtab);
        var content = 'test';
        var newPage = $('<div id=' + tabId + ' class="tab-pane fade">' +
            '<p>'+content+'</p>' +
            '</div>');
        $('#myTabContent').append(newPage);
    });
    //删除标签
    $(document).on('click', '.tab-close', function(ev){
        var ev=window.event||ev;
        //阻止冒泡
        ev.stopPropagation();
        //先判断当前要关闭的tab选项卡有没有active类,如果有则给下一个选项卡以及内容添加active
        var liNode=$(this).parent().parent(),ulNode=liNode.parent();
        if(liNode.hasClass('active')){
            if(liNode.index()==(ulNode.children('li').length-1)){
                liNode.prev().addClass('active');
                $(liNode.prev().attr('href')).addClass('active');
            }else{
                liNode.next().addClass('active');
                $(liNode.next().attr('href')).addClass('active');
            }
        }
        liNode.remove();
        $(liNode.attr('href')).remove();
    });
})

 

© 著作权归作者所有

J_Queue
粉丝 5
博文 56
码字总数 35716
作品 0
杭州
后端工程师
私信 提问
jQuery中bind方法与live方法区别

今天做项目时遇到的关于live与bind的问题,经查阅资料所得,live实际上为bind方法的变型,bind方法仅支持当前存在元素的事件绑定,而对于日后js动态生成的元素绑定无效。而live方法则弥补了此...

boxiZen
2013/12/20
0
3
jquery live() delegate() on() 事件委托的一些区别

随着DOM结构的复杂化和Ajax等动态脚本技术的运用,有了较多的动态添加进来的元素,直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到,在这里就需要用到事件委托方法,JQ为事件委...

rikkilovelife
2015/03/20
0
0
jquery中对动态生成的标签不会响应click事件

Jquery中对ajax动态生成的html标签不会响应 $(selector).click(function.. 或者$(selector).bind('click',function.., 需要用.live jQuery 1.7 开始,不再建议使用 .live() 方法。请使用 .o......

LiShixi
2011/09/03
0
3
【react开发】使用swiper插件,loop:true时产生的问题解决方案

这2天上班遇到的问题:react使用swiper3插件实现banner轮播,其中有个banner图有个click点击事件,而其他的是页面跳转。出现了一个问题: 就是向右滑动到该帧时的swiper,点击时未触发react...

海瑞菌·博客
2018/07/20
0
0
jquery之on()和click()的区别讲解

之前写代码时发现动态添加的事件点击无效果,结果发现是on()和click()语法上的理解失误,在这里总结一下 举例说明: 表结构 添加 1.点击添加按钮向ul里面动态添加删除按钮 $(".btn").on('clic...

cyyy1223的博客
2017/12/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

vi命令详解

vi命令详解 vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令。由于对Unix及Linux系统的任何版本,vi编...

shzwork
10分钟前
1
0
Centos 7 安装 Docker

参考 https://yq.aliyun.com/articles/110806 1. 卸载旧版的 docker $ sudo yum remove docker \ docker-client \ docker-client-latest \ ......

北漂的我
12分钟前
0
0
GitLab 发布新版本,增强的操作仪表板

昨天,GitLab的团队发布了GitLab 11.10,一个基于Web的DevOps生命周期工具。这个版本提供了新的特性,包括操作仪表板上的管道、合并结果的管道等等。 GitLab 11.10有什么新内容? 增强操作指示...

linuxCool
17分钟前
0
0
spring application 之 ResolveType

jdk1.5 的泛形 变量类型 <t>,<t,k>,<t extends list & map> 这些都是变量类型 类 class A<t extends b & list,k t>{}TypeVariable[] tvs = A.class.getTypeParameters()tvs 的 name 就是......

my_juke
22分钟前
0
0
Java 8的核心新特性:Lambda(匿名函数)、流、默认方法

Java 中的函数 Java 8中新增了函数——值的一种新形式。函数作为一等值,使用方法引用 :: 语法(即“把这个方法作为值”),作为函数式值来传递。 File[] hiddenFiles = new File(".").listF...

Lienson
32分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部