首页 > 软件开发 > HTML >

js 初始化动态创建on方法

来源:互联网 2023-03-16 19:16:29 版权归原作者所有,如有侵权,请联系我们

在做前端页面开发时,如果你有的元素是通过js创建的,但又需要为新创建的html元素添加事件,我们可以在初始化时动态创建on方法,这样就不需要每次新建元素都绑定事件了,下面来看一下是怎么处理的。

UjZ办公区 - 实用经验教程分享!

UjZ办公区 - 实用经验教程分享!

方法/步骤

  • 1

    我们在html里先创建一个div元素,有class样式属性。

    UjZ办公区 - 实用经验教程分享!

    UjZ办公区 - 实用经验教程分享!

    js 初始化动态创建on方法UjZ办公区 - 实用经验教程分享!

  • 2

    然后在jquery的ready方法里,为这个div添加点击事件,就是使用on方法来添加,点击事件里弹出div里的内容。

    UjZ办公区 - 实用经验教程分享!

    UjZ办公区 - 实用经验教程分享!

    js 初始化动态创建on方法UjZ办公区 - 实用经验教程分享!

  • 3

    添加事件后,在代码后面定义一个字符串,是新加div的html代码字符串。

    UjZ办公区 - 实用经验教程分享!

    UjZ办公区 - 实用经验教程分享!

    js 初始化动态创建on方法UjZ办公区 - 实用经验教程分享!

  • 4

    把字符串通过append方法附加到c1这个父div上,就是在这个div上新加了二个div。UjZ办公区 - 实用经验教程分享!

    js 初始化动态创建on方法UjZ办公区 - 实用经验教程分享!

  • 4
  • 5

    添加div后,我们不需要再为这二个div添加事件,因为之前已经使用on来为click样式的div添加好事件了。UjZ办公区 - 实用经验教程分享!

    运行页面,点击第一个div,这个div不是通过js创建的。

    UjZ办公区 - 实用经验教程分享!

    UjZ办公区 - 实用经验教程分享!

    js 初始化动态创建on方法UjZ办公区 - 实用经验教程分享!

  • 6

    点击后,能正常弹出div的内容,事件正常。

    UjZ办公区 - 实用经验教程分享!

    UjZ办公区 - 实用经验教程分享!

    js 初始化动态创建on方法UjZ办公区 - 实用经验教程分享!

  • 7

    点击第二个div,这个div是用js动态添加的。UjZ办公区 - 实用经验教程分享!

    也能弹出该div的内容,事件也正常。

    UjZ办公区 - 实用经验教程分享!

    UjZ办公区 - 实用经验教程分享!

    js 初始化动态创建on方法UjZ办公区 - 实用经验教程分享!

  • 注意事项

    • 需要先引入jquery脚本文件。

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!UjZ办公区 - 实用经验教程分享!


    标签: HTMLJQUERY

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号