问题:
如果DOM元素是动态生成的,在这种情况下为该元素绑定click时间,发现点击事件无效,设置debugger,console.log也没用
解决:
juery:为目标元素的父元素,或者是整个文档绑定点击事件
javascript: 使用闭包
法一:jquery:
//点击播放单词音频$(document).off("click").on("click", ".audiolins", function (event) {//如果元素是动态生成的,需要这样绑定点击事件,否则点击无效event.stopPropagation();var audioSrc = $(this).attr('data-src');var audio = new Audio(audioSrc);audio.play();})
法二:javascript (使用闭包)
var audiolinsAll = document.getElementsByClassName('audiolins');for (var m = 0; m < audiolinsAll.length; m++) {audiolinsAll[m].onclick = (function (m) {//闭包return function () {console.log("点击 " + m)var audioSrc = audiolinsAll[m].getAttribute("data-src");var audioM = new Audio(audioSrc);audioM.play();}})(m);}
javascript 错误示范:
不使用闭包,就获取不到当前的m值
因为在javascript中for(){}不是一个作用域,所以for循环里面定义的函数读取的m是onclick绑定的匿名函数的活动对象里的m,这个匿名函数活动对象的i当然是在for循环结束后i的值,所以一直是4不会变
var audiolinsAll = document.getElementsByClassName('audiolins');for (var m = 0; m < audiolinsAll.length; m++) {audiolinsAll[m].onclick = function (m) {console.log("点击 " + m) //如果m的取值范围是[0,1,2,3],这里的m值不是你点击的某个 audiolinsAll,而是一直为4//var audioSrc = audiolinsAll[m].getAttribute("data-src");var audioSrc = '/api/v2/speech/speakweb?langid=en&voicename=en_uk_male&txt=apple'//地址need 修改var audioM = new Audio(audioSrc);audioM.play();};}
闭包文章参考链接
如果觉得《jquey javascript 绑定点击事件(click事件无反应 因js获取不到当前的点击项)》对你有帮助,请点赞、收藏,并留下你的观点哦!