$().click()和$().on(‘click‘,function(){})的区别

在处理js追加元素点击事件时 遇到点问题
当你用$().click() 触发的时候 你追击的元素会无法触发 也就是 不在页面内的元素

on方法包含很多事件,点击,双击等等事件。和$().click()的用法一样,最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。

e.stopPropagation();
这个也是个知识点 阻止事件冒泡到父级元素
比如说 在多层嵌套li 的时候 点击事件触发 $(this) 输出是他的父级
加上e.stopPropagation(); 这一有效的解决

		 $("li").on("click",'li',function(e){
                // e.preventDefault();
               //阻止事件冒泡到父级元素
                e.stopPropagation();
                var id = $(this).attr("data-id");
                var son = $(this).attr("data-son");
                var than = $(this);
                if (son > 0) {
                    if (than.find("ul").length > 0) {
                        if ($(this).children(".sub-menu").css('display') === 'none') {
                            $(this).children(".sub-menu").css({'display': 'block'});
                        } else if ($(this).children(".sub-menu").css('display') === 'block') {
                            $(this).children(".sub-menu").css({'display': 'none'});
                        }
                    } else {
                    //逻辑操作 可忽略
                    Fast.api.ajax({
                                url: 'user/team_order',
                                data: {ids: id}
                            }, function (data, ret) {
                                //成功的回调
                                var html = '<ul class="sub-menu" style="display:block;">';
                                $.each(data, function (index, value) {
                                    html += '<li data-id="' + value.id + '" data-son="' + value.data.son + '"><a href="javascript:;"> ' +
                                        '<span class="title">' + value.nick_name  + '</span>' +
                                        '<span class="title">下级用户(' + value.data.son + ')</span>'+
                                        '<span class="je">累计金额:' + value.data.money + '</span></a></li>';
                                });
                                html += '</ul>';
                                than.find("a").after(html);
                            }
                        )
                    }
                } else {
                    Layer.alert('没用更多的下级用户了');
                    //console.log('没用更多的下级用户了');
                }

            })
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wise man

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值