jQuery动态绑定事件或者原生js动态绑定事件
说一个这周写前后端交互时遇到的一个印象深刻的问题——动态绑定事件。一般我们给节点绑定事件使用的都是这样的形式$("#btns").click(function () {$("#myModalTwo").show();$("#idTwo").val(this.parentNode.parentNode.children[0].innerHTML);$("#nameTwo").val(this.par
·
说一个这周写前后端交互时遇到的一个印象深刻的问题——动态绑定事件。
一、jQuery
一般我们给节点绑定事件使用的都是这样的形式
$("#btns").click(function () {
$("#myModalTwo").show();
$("#idTwo").val(this.parentNode.parentNode.children[0].innerHTML);
$("#nameTwo").val(this.parentNode.parentNode.children[1].innerHTML);
$("#priceTwo").val(this.parentNode.parentNode.children[2].innerHTML);
$("#describeTwo").val(this.parentNode.parentNode.children[3].innerHTML);
$("#classingTwo").val(this.parentNode.parentNode.children[4].innerHTML);
$("#numberTwo").val(this.parentNode.parentNode.children[5].innerHTML);
})
但当我们遇到动态添加的节点,这两种方式就不再起作用了,那么引入今天的主题了,怎样给动态添加的节点绑定事件呢????可以使用下面的jQuery语法:
$("#start,#end").on("click",function(){
alert("The paragraph was clicked.");
});
应用到我的代码上就是这样:
$("#mytable").on("click", ".btns", function C() {
$("#myModalTwo").show();
$("#idTwo").val(this.parentNode.parentNode.children[0].innerHTML);
$("#nameTwo").val(this.parentNode.parentNode.children[1].innerHTML);
$("#priceTwo").val(this.parentNode.parentNode.children[2].innerHTML);
$("#describeTwo").val(this.parentNode.parentNode.children[3].innerHTML);
$("#classingTwo").val(this.parentNode.parentNode.children[4].innerHTML);
$("#numberTwo").val(this.parentNode.parentNode.children[5].innerHTML);
});
这样问题就迎刃而解了!!!
后来我又更深层次的去了解了一下这种on方法动态绑定的用法,常用的可以分为以下两类:
(1)多个选择器绑定同一个事件
$("#start,#end").on("click",function(){
});
(2)多个事件绑定同一个函数
$("p").on("mouseover mouseout",function(){
})
二、原生js
(1)动态生成的DOM元素上添加函数
//绑定函数
<button onclick="func()"></button>
//定义函数
function func(){
}
(2)利用for循环
准备工作:给想绑定函数的动态元素添加类名classname
//获取所有动态添加的有classname类名的元素
const all=document.getElementsByClassName('classname')
//for循环添加事件
for(let i=0;i<all.length;i++){
all[i].addEventListener('click',function(){})
}
更多推荐
已为社区贡献3条内容
所有评论(0)