在处理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('没用更多的下级用户了');
}
})