js多个事件的事件委托有的成功有的失败-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_52137547/article/details/130197817

文章讲述了在JavaScript中使用jQuery动态生成表格并尝试给表格内的图片元素同时绑定error和click事件时遇到的问题。发现click事件能成功绑定，但error事件无效。解决方案是将事件绑定分开写，并且在使用Bootstrap分页的情况下，需要在创建表格时添加onPostBody事件来确保每次换页时error事件都能被重新绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原代码：大致是将一个table生成后插入#Herb下，目标是给table内的img绑定error和click事件，发现click绑定成功error绑定失败

<body>
	<div id="container" class="userpanel">
		<div id="ViewMain">
			<div id='Molecular'></div>
			<div id="Herb"></div>
		<script>
			$(function(){
				if($id.search(/^PTHT/)==-1 && $id.search(/^PTHO/)==-1){
					$.get("File.php",{file:$DataFile,id:$line},function(response){
						var all=response.split("\t");
						if(all.length==1){
							if(all[hash.Molecular]!=""){
								$.getJSON("Basic/HerbAnno.json",function(herbanno){
									$("#Herb").append(`
										<p class='subtitle-grad'>&#10059;&nbsp;Herb</p><hr size='1'>
										<table id='Herbtab' class='annotab' cellpadding='4'></table>
									`);
									var mols=all[hash.Molecular].split(";");
									var herbannoindexs=all[hash.HerbAnno].split(";");
									var herbjson = []
									for(var k=0;k<mols.length;k++){
										for(var m=0;m<herbannoindexs.length;m++){
											var herbannoindex = herbannoindexs[m].split(",");// herbannoindex == Mol_ID
											for(var i=0;i<herbannoindex.length;i++){
												var anno = herbanno[herbannoindex[i]];
												if(typeof(anno) == "undefined"){continue;}// 该herb的Mol_ID不在已注释了的herb里
												for(var j=0;j<anno["Name"].length;j++){
													var name = anno["Name"][j].replace(/\]/g,"").split("[");
													$.each(name,function(index,n){
														if(index==2 && n!=""){name[index] = "<em style='font-family:\"Times New Roman\",Times,serif;'>"+name[index]+"</em>"}
														if(n==""){name.splice(index,1);}
													});
													name=name.join("<br>")
													var usepart = anno["UsePart"][j].replace(/,/g,",<br>")
													var category = anno["Category"][j].replace(/\(/g,"<br>(");
													var habitat = anno["Habitat"][j];
													var picture = "<img loading='lazy' src='images/Anno/Herb/"+anno["Picture"][j]+"' alt='N/A'>";
													var property = anno["Property"][j].replace(/,/g,",<br>");
													var meridians = anno["Meridians"][j].replace(/,/g,",<br>");
													herbjson.push({
														"Molecular":mols[k],
														"Herb Name":name,
														"Use Part":usepart,
														"Category":category,
														"Habitat":habitat,
														"Picture":picture,
														"Property":property,
														"Meridians":meridians
													});
												}
											}
										}
									}
									$("#Herbtab").bootstrapTable('destroy').bootstrapTable({
										data: herbjson,
										method: "get",
										sidePagination: "client",
										columns:herbcolumn,
									});
                                    // 问题代码
									$("#Herb").on({
										"error":function(){$(this).parent().html("N/A");},
									    "click":function(){console.log(111);}},"img");
								});
							}
						}
					});
				}
			});
		</script>

解决：分开写

$("#Herb").on("click","img",function(){console.log(111);});
$("#Herb img").on("error",function(){$(this).parent().html(111)});

原因等我知道了来补（

更新：由于我用的是bootstrap，换页之后error事件又不会触发，可以在创建bs table的时候添加一个onPostBody事件，在里面绑定error事件即可，这样每次换页都会触发一次事件委托

// 本人小白，工作需要学习搭网站，有疏漏恳请指出