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

之前遇到过一次.click()无效，改成on绑定click就好了的情况，看了几篇博客后，发现是自己对click()和on的理解不够，没太在意，最近又遇到了，所以写下这篇博客加深印象。

$(选择器).click(fn)：当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。而.J_del这个删除按钮是通过append加到页面上的。所以.click()无效

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

另外这样写也不可以

因为通过on或click绑定的事件只对当前存在的元素有效，即on前面的元素必须在页面加载的时候就已经存在dom里,所以后添加的类名为.del的按钮无效

可以像这样把事件绑定到.del的父元素上（事件委托），注意父元素必须是已经存在dom里，而不是后面动态添加的。

$().on()的知识点补充：

$().on()支持直接在目标元素上绑定事件，也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下，即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。

此外，该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

要删除通过on()绑定的事件，请使用off()函数。如果要附加一个事件，只执行一次，然后删除自己，请使用one()函数。

该函数属于jQuery对象(实例)。

从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。
$().bind()直接绑定在元素上，和click，blur，mouseon一样的点击事件。
$().live()是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。
$().delegate()是更精确的小范围的使用事件代理。
$().on()结合了这三个方法的优势摒弃了劣势。

该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

4. 阻止事件冒泡和事件委托的方法：
return false。
在事件的处理中，可以阻止默认事件和冒泡事件。

event.preventDefault()
在事件的处理中，可以阻止默认事件但是允许冒泡事件的发生。

event.stopPropagation().。
在事件的处理中，可以阻止冒泡但是允许默认事件的发生。

.click()与on('click',function())相关推荐

【jQuery 区别】.click()和$(document).on(click,指定的元素,function(){});的区别
给出以下的代码展示: 1 //绑定下一页的点击事件 2 $("a[aria-label='Next']").click(function(){ 3 $("a[aria ...
Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter
1.绑定监听@click: (以监听click为例,其他如keyup,用法类似) v-on:click="fun" @click="fun" @cli ...
MUI click事件无效 click没反应 click监听不到
MUI click事件无效 click没反应 click监听不到(有的说tap会点击两次,换成click就没事的案例,试了一下不成功还是用tap比较好) html 部分代码: <li id=&q ...
@click.stop和@click.prevent区别
click.stop stop:指的是阻止父组件(节点)的事件冒泡... <div id="app"><div class="box" @cl ...
关于jquery的click()和trigger(‘click‘)方法的一点问题
在原生js中如果要模拟事件其实比较麻烦的事情,因为要考虑到各个浏览器对dom标准的兼容,同时还要进行多个步骤(创建event对象.初始化.正式触发等步骤).不过jquery就有一个非常简单好用的cli ...
$().click()和$().on(‘click‘,function(){})的区别
在处理js追加元素点击事件时遇到点问题当你用$().click() 触发的时候你追击的元素会无法触发也就是不在页面内的元素 on方法包含很多事件,点击,双击等等事件.和$().click() ...
$().click()和$().on('click','要选择的元素'，function(){})的区别
$(选择器).click(function(){}):页面中已经存在的DOM. $(ducument).on('click','要选择的元素',function(){}):动态创建的元素也能触发事件, ...
click和on click区别
click和onclick的区别 onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么:click本身是方法,作用是触发onclick事件,只要执行了元素的click()方法,就会触发oncli ...
Vue的@click、@click.prevent、@click.stop
1.@click,绑定监听(单击事件) v-on:click="function" @click="function" ...
JQuery $().click()与$().on(click...)区别
jQuery的出现,大大简化了对dom的操作,但是如果不是仔细阅读api和进行操作,就不知道其中最大的优点和使用方式.就拿 ( ) . c l i c k ( ) 和 ().click()和 ().c ...

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

.click()与on('click',function())相关推荐

最新文章

热门文章