jq动态添加的元素如何给事件

 时间:2026-02-14 02:41:30

1、第一步,使用鼠标点击打开HBuilder软件,如图所示:

jq动态添加的元素如何给事件

2、第二步、点击菜单栏文件-->新建-->Web项目,如图所示:

jq动态添加的元素如何给事件

3、第三步,然后输入项目名,jq,再点击完成按钮,如图所示:

jq动态添加的元素如何给事件

4、第四步,映入jq开发包jquery-3.3.1.min.js,然后在该项目的index.html文件中键入代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>jq动态添加的元素如何给事件?</title>

</head>

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("p").append("<div id='newdiv' onclick='onnewClick()'>新标签元素</div>");

  });

  


});

 function onnewClick(){

  $("#newdiv").css("background-color","red");

  }

</script>

<body>

这是一个段落。

<button id="btn1">添加新标签元素</button>

</body>

</html>

jq动态添加的元素如何给事件

5、第五步,然后点击运行按钮--->浏览器运行,如图所示:

jq动态添加的元素如何给事件

6、第六步、在浏览器中查看运行结果,然后点击添加新标签元素按钮,如图所示:

jq动态添加的元素如何给事件

7、第七步,点击添加新元素按钮之后,可以看到出现新元素标签,再继续点击新元素标签,如图所示:

jq动态添加的元素如何给事件

8、第八步,点击新元素标签之后,可以看到新元素标签背景颜色变成红色,如图所示:

jq动态添加的元素如何给事件

  • 微信小程序脱坑记之wx.navigateTo不跳转
  • jdbc代码怎么写?
  • IntelliJ IDEA怎么通过视图查看本地代码差异
  • XAMPP安装好了APACHE老是打不开怎么办
  • idea2018如何自动导入包引用?
  • 热门搜索
    科技手抄报图片 感恩教师手抄报 法律手抄报内容 鲁滨逊漂流记手抄报 一年级手抄报大全 我爱读书手抄报图片 感恩母亲的手抄报图片 劳动节手抄报内容资料 清明节手抄报简单漂亮 战争手抄报