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

news/2024/2/28 10:14:35

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

http://www.ppmy.cn/news/943941.html

相关文章

Vue中@click.stop与@click.prevent

Vue中click.stop与click.prevent 一、click.stop 问题&#xff1a;父元素中添加了一个click事件&#xff0c;其下面的子元素中也添加了click事件&#xff0c;此时&#xff0c;我想点击子元素获取子元素的点击事件&#xff0c;但却触发的是父元素的事件&#xff1a; <view…

.click()与on('click',function())

之前遇到过一次.click()无效,改成on绑定click就好了的情况,看了几篇博客后,发现是自己对click()和on的理解不够,没太在意,最近又遇到了,所以写下这篇博客加深印象。 $(选择器).click(fn):当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。而.J_del这…

onclick和click的区别及示例

1.$("").click与onclick的区别示例介绍 onclick是绑定事件&#xff0c;click本身是方法作用是触发onclick事件&#xff0c;只要执行了元素的click()方法&#xff0c;下面有个示例&#xff0c;大家可以看看 Html代码 <script type"text/javascript">…

JavaScript中 onclick()、click()触发点击事件的区别

function load(){ //下面两种方法效果是一样的document.getElementById("target").onclick();document.getElementById("target").click(); }btnObj.click()是真正地用程序去点击按钮&#xff0c;触发了按钮的onclick()事件,按钮不隐藏的时候是可以调用…

js中click 和onclick之间的区别

1&#xff0c;onclick是绑定事件&#xff0c;告诉浏览器在鼠标点击时候要做什么 2&#xff0c;click本身是方法&#xff0c;作用是触发onclick事件&#xff0c;只要执行了元素的click()方法&#xff0c;就会触发onclick事件。 3&#xff0c;此外&#xff0c;正常情况是先方法…

Click(点击)

Click <button id"btn" onclick"threeFn()">点我</button>点击事情方式 // 第一种 通过点击事件btn.onclick function () {alert(这是第一种点击方式);};监听点击事件 // 第二种 监听点击事件btn.addEventListener(click, function () {al…

click

Click click 是一个非常方便的包&#xff0c;可以在用命令行启动的时候传入一些变量&#xff0c;而不用每次都要修改配置文件。 简单使用 # hello.py import clickclick.command() click.option(--count, default1, helpnumber default 1) click.option(--name, helpset per…

js中click()与onclick()的区别

由一个简单示例到 js中click()与onclick()的区别 之前朋友在学习js的时候遇到一个有意思的问题。 先贴一份代码说一下代码构成 这里是html结构 <ul><li><input type"checkbox" name"" id"" class"che" checked />全…

click和on click区别

click和onclick的区别 onclick是绑定事件&#xff0c;告诉浏览器在鼠标点击时候要做什么&#xff1b;click本身是方法&#xff0c;作用是触发onclick事件&#xff0c;只要执行了元素的click()方法&#xff0c;就会触发onclick事件 click可以理解为一次简单的触发&#xff0c;…

click与onclick的区别

click与onclick的区别 首先给出示例代码&#xff1a; 区别&#xff1a; 1.onclick是绑定事件&#xff0c;告诉浏览器在鼠标点击时候要做什么。 click本身是方法作用是触发onclick事件&#xff0c;只要执行了元素的click()方法&#xff0c;就会触发onclick事件。如上诉代码所…

click和onclick的区别

click与onclick区别 click是对象的方法&#xff0c;onclick是事件&#xff0c;当我们点击按钮是&#xff0c;首先触发的是事件&#xff0c;然后是方法&#xff1a; <html> <head><title>Doument</title> </head> <body><div id"…

HTML中click()和onclick()的本质区别与案例和解释

关注公众号&#xff1a;”奇叔码技术“ 回复&#xff1a;“java面试题大全”或者“java面试题” 即可领取资料 HTML中click()和onclick()的本质区别与案例和解释&#xff1b;分为四点&#xff1b; 第一点&#xff1a;英文翻译&#xff1a; On的意思为 &#xff1a;打开&a…

Vue基础语法之@click、时间修饰符@click.stop与@click.prevent、按键修饰符(如@keyup.enter)

1、绑定监听click:&#xff08;以监听click为例&#xff0c;其他如keyup&#xff0c;用法类似&#xff09; v-on:click“fun” click“fun” click“fun(参数)” <button click"test1">test1</button><button click"test2(abc)">test2&l…

JS中click和onclick本质区别

本文主要JavaScript中click和onclick本质区别 click是一个方法&#xff0c;onclick是一个事件。 求同&#xff1a; 告诉浏览器在鼠标点击时候要做什么。 存异&#xff1a; click属于方法&#xff0c;是JS语句直接调用&#xff0c;即显示调用。 onclick是属于事件&#xff0…

Java编程-IDEA中Java的main方法、sout快捷键设置

目的 我打出psvm这四个字母时&#xff0c;可快速打出main方法 我打出syso,sout时&#xff0c;可快速打出System.out.println(); 步骤&#xff1a; 1、打开IDEA&#xff0c;点击文件&#xff0c;选择Editor中的 Live Templates选项&#xff0c;点击右侧边栏中的 号 2、选中…

机器学习中的 K-均值聚类算法及其优缺点

K-均值聚类算法是一种非监督学习的聚类算法。其基本思想是&#xff1a;将所有数据点分为k个簇&#xff0c;使得簇内数据点相似度较高&#xff0c;簇间数据点相似度较低。 算法流程&#xff1a; 随机选择k个数据点作为簇中心&#xff1b;对每个数据点&#xff0c;根据其与簇中…

银河帝国----基地

《基地》这册书开头简要介绍了为何要开辟基地&#xff0c;由于哈里谢顿通过心理史预测银河帝国将会在几个世纪后解体&#xff0c;而且不可避免&#xff0c;并且会经历一个长达3万年的黑暗时代&#xff0c;才能建立第二银河帝国&#xff0c;为了减少三万年的黑暗时代&#xff0c…

第二银河怎么用电脑玩 第二银河模拟器玩法教程

《第二银河》是一款星际题材的太空宇宙游戏&#xff0c;在广袤而悠远的太空中不断探索发掘&#xff0c;体验最深层次的星际对决与完善的对抗体验&#xff0c;找寻资源与其他玩家火并交战&#xff0c;升级武器与星舰成为宇宙中的霸主势力。 接下来&#xff0c;和小编一起看下第二…

银河护卫队漫威大法好之漫威系列

这周周末虽然调休一天的情况下依然挡不住咱对这部备受好评的漫威新作产生极大兴趣&#xff0c;由于表哥请客吃饭看电影且不用掏一分钱外加选的座位实在太靠前还看IMAX的情况下观影还算很爽&#xff0c;唯独被提前公开处刑跳骂的贾翻译的名字出现在片尾闪瞎了钛合金狗眼&#xf…

第二银河找不到更新服务器,《第二银河》战争流程

目前游戏中的两种战争根据所选目标的不同在流程上有细微的变化&#xff0c;但其主体都为4个阶段&#xff1a;备战、交战、休战和决战阶段。其中&#xff0c;备战和交战阶段称为战争的上半场&#xff0c;休战和决战阶段称为战争的下半场&#xff1a;进攻方需要连续在上、下半场中…
最新文章