关于jquery的on(“click”,function(){}),事件绑定无效

之前在做jquery时,遇到一个问题,就是我在<div class=".comment-action"></div>append一个<a class="cancel" href="javascript:void(0)"></a>给啊标签绑定click 点击事件时 不起作用,jquery的版本时3.4.1,也找不到起的错误.就是没触发:

$(self).find(".comment-action .cancel").off("click");
//console.log("点击了取消回复的按钮!");
$(self).find(".comment-action .cancel").on("click", function () {
     alert("开始运行事件");
     // 1.移除之前的取消回复按钮
     $(self).find(".cancel").remove();
     //self.find("#ajax-contact-web-reply").remove();
     // 2.移除所有回复框
     self.removeAllCommentFrom();
     //console.log("点击了取消回复的按钮!");
     // 3.添加根下的回复框
     //self.addRootCommentFrom();
});

尝试了了很多次，很无奈也很烦躁,之后之后看了jquery的on()函数的文档才知道,可以上网查了下jQuery on()函数的用法，和相关问题:

概述

在选择元素上绑定一个或多个事件的事件处理函数。

on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件，请参阅.off()。要附加一个事件，只运行一次，然后删除自己， 请参阅.one()

参数

events,[selector],[data],fnV1.7

events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

events-map,[selector],[data]V1.7

events-map:个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。

selector:一个选择器字符串过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

这里.comment-action时.cancel的直接父类，我把它绑定给.comment-action父类，然后我再次打开控制台，点击，alert()出现

问题解决，也花了不少时间啊。。

$(self).find(".comment-action .cancel").off("click");
//console.log("点击了取消回复的按钮!");
$(self).find(".comment-action").on("click",".cancel", function () {
     alert("开始运行事件");
     // 1.移除之前的取消回复按钮
     $(self).find(".cancel").remove();
     //self.find("#ajax-contact-web-reply").remove();
     // 2.移除所有回复框
     self.removeAllCommentFrom();
     //console.log("点击了取消回复的按钮!");
     // 3.添加根下的回复框
     //self.addRootCommentFrom();
});

后续补充：

有些情况下，即使是使用直接父级的on事件委托的方式（上面那种方法）也不能为子元素绑定事件的话，其实还用另外一种情况就是想要绑定事件的子元素的直接父级元素也是新添加进去的元素，这个时候，使用上面的直接父级元素的事件委托方式也是不好使的，jQuery里面on所绑定的事件必须是已经存在的元素，而后来新添加的元素经过实验也确实是不行，所以解决方法就可以呼之欲出了：

既然直接父级on事件委托不好使，那就不把事件绑定在直接父级上，最安心的方法就是绑定在body中，body是不会不存在的。

//以点击事件为例，其他事件绑定道理一样
$('body').on('click','.comment-action .cancel',function(){
    //something
})
当然如果不喜欢用body来事件委托的话可以选一个已经存在的父级元素来事件委托。

//假设  .comment-content 是 .comment-action 和 .action-btns 的直接或间接的父级
//选取 .action-btns 下的 .cancel

$('.comment-content').on('click','.comment-action .cancel',function(){
    //something
})

也可以

$('.comment-content').on('click','.action-btns .cancel',function(){
    //something
})

总结:“on()方法，要绑定到父级或者 body”;如果直接父级不是本来存在的,而是后添加的,那就在绑定上级父类,知道可以为止,有也可以直接绑定body