失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > jquey javascript 绑定点击事件(click事件无反应 因js获取不到当前的点击项)

jquey javascript 绑定点击事件(click事件无反应 因js获取不到当前的点击项)

时间:2021-05-16 04:11:01

相关推荐

jquey  javascript 绑定点击事件(click事件无反应 因js获取不到当前的点击项)

问题:

如果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获取不到当前的点击项)》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。