js教程

动态生成元素触发事件无效的解决方法

我的站长站 2020-08-09 人阅读

在写JS时,我们在处理动态生成的HTML触发事件时,会无效。比如:

$("body").html("<b>I Love www.wdzzz.com</b>");
$("b").click(function(){alert(123)})

你会发现点击B标签,并不会触发alter弹窗。具体逻辑原因我的站长站没深究,希望研究的可以去网上看看。

这里我的站长站只分享方法,会用到JQ的.on语法。

$("body").html("<b>I Love www.wdzzz.com</b>");
$("body").on("click","b",function(){
alert(123)
});

这个就相当于重新选取了一次,从body开始一直到下面的b标签,这样就可以重新触发生成的B标签事件了。

当然里面的click点击事件也可以换成其他任何事件。

写的不是非常专业,希望能够帮助大家。

最新更新
  • js返回上一页、刷新页面代码大全

    返回上一页代码:<a href="javascript:history.go(-1)">返回上一页</a>onclick返回上一页代码:<a href="javasc...

    js教程 2天前
  • js语言!=与!==的区别

    != (不等于)!= 是松散的不等于运算符。它在比较两个值时,会先进行类型转换(type coercion),然后再比较值是否不...

    js教程 6天前
  • JS防止网站被扒的解决方法

    这个代码能够直接保护整个站,而不再是单个页面,直接把代码放到自己的网站上,如果是博客建议放到header.php头部...

    js教程 3周前
  • Hexo插件开发实战教程

    Hexo的插件嵌入有两种方式,一种是通过脚本(Scripts)的方式引入,一种是通过插件(Packages)的方式将自定义的插件内...

    js教程 1个月前
  • JavaScript定时删除指定元素方法

    JavaScript定时删除指定元素一般用到自动隐藏的效果功能上面,主要用到了JS的setTimeout语法。下面是一个定时...

    js教程 1个月前