jquery 动态添加的元素，用on事件

叁歲伎倆 2024-02-17 22:56 54阅读 0赞

*  ##### 事件语法：.on( events \[, selector \] \[, data \], handler(eventObject) )  #####
 *  在选定的元素上绑定一个或多个事件处理函数。
 *   *   *  **events**
            
            类型: String 
            
            一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"。
         *  **selector**
            
            类型: String 
            
            一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 `null` 或者忽略了该选择器，那么被选中的元素总是能触发事件。
         *  **data**
            
            类型: Anything 
            
            当一个事件被触发时，要传递给事件处理函数的`event.data`。 
         *  **handler(eventObject)**
            
            类型: Function() 
            
            事件被触发时，执行的函数。若该函数只是要执行`return false`的话，那么该参数位置可以直接简写成`false`。 
    
      
    
    
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript">
        $(function(){
        //动态添加
        $("#add").on("click",function(){
        	console.log("come in!");  //调试时，控制台显示
        	//添加到info中
        	$(".my").append('<div class="delete"><h3>单击删除我</h3></div>');
        });
         //对动态添加的元素添加事件-删除
        $(".my").on("click",".delete",function(){
        	console.log("come in Delete！");
        	//删除当前添加
        	$(this).remove();
        });
         }); 
        </script>
        <body>
        <h3 id='add' >单击添加动态元素</h3>
        <div class="my"></div>
        </body>
    
    效果图：
 *  ![Center][]  
    
 *  ![Center 1][]

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/4cbaade3d5f64ccbb67c34eeab3c01b9.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/842c4fb664f242d4ae27c6f82210b1cf.png