jquery操作动态生成的元素

来源:互联网 发布:java企业门户网站源码 编辑:程序博客网 时间:2024/05/13 05:03

jq新版本的事件绑定主要是用on:

那么我们试着用on来写

<html><head>  <title></title></head><script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><body><p id="add">点击增加元素</p></body><script type="text/javascript">$("#add").one("click",function  () {  $("#add").append('<p class="yuansu">增加的元素</p>');})$(".yuansu").on("click",function(){  console.log(1);})</script></html>

我们会发现

on没有起作用

原因是jq不能获取到动态生成的元素

我们改成对静态元素进行操作

<html><head>  <title></title></head><script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><body><p id="add">点击增加元素</p></body><script type="text/javascript">$("#add").one("click",function  () {  $("#add").append('<p class="yuansu">增加的元素</p>');})$("body").on("click",".yuansu",function(){  console.log(1);})</script></html>



原创粉丝点击