如何用jQuery动态为图片添加onclick事件？点击触发函数异常排查

嘿，我一眼就看出问题出在哪啦！你现在的代码里，image.on("click",submitForm(this.id));这一行是直接调用了submitForm函数，而不是把它设置成点击事件的回调——因为函数后面加了括号()，浏览器会立即执行它，所以页面加载时就触发了，而不是等你点击图片的时候。

下面给你两种靠谱的解决方法：

方法一：用匿名函数包裹回调 #

这是最常用的方式，把submitForm的调用放在匿名函数里，这样只有当图片被点击时，匿名函数才会执行，进而调用submitForm，而且此时this指向被点击的图片元素，能正确拿到id：

image.on("click", function() {
  submitForm(this.id);
});

方法二：通过事件数据传递参数 #

如果你不想依赖this，可以用jQuery的事件数据功能，把要传递的id提前存好，点击时从事件对象里取：

image.on("click", { imgId: prop[j] }, function(event) {
  submitForm(event.data.imgId);
});

另外还要提醒你两个小细节：

• 原代码里的divElem、elem、image都没加声明（let/var/const），会变成全局变量，建议加上let避免全局污染；
• <div class="col-sm-3", style="height:110px">里的逗号是多余的，要去掉，不然可能导致样式解析异常。

修正后的完整代码如下：

function create() {
  let divElem = $('<div class="row">'); 
  $('#bankList').append(divElem);
  let elem = $('<div class="col-sm-3" style="height:110px">');
  let image = $('<img style="max-width:90%">');
  let imageFile = '${pageContext.request.contextPath}/images/' + prop[j];
  image.attr('src', imageFile);
  image.attr('id', prop[j]);
  // 修正后的点击事件绑定
  image.on("click", function() {
    submitForm(this.id);
  });
  elem.append(image);
  divElem.prepend(elem);
}

这样修改后，submitForm就只会在你点击图片的时候才触发啦！

内容的提问来源于stack exchange，提问作者abhishek vashistha