append之后click失效

最新推荐文章于 2022-04-21 17:02:02 发布
原创 最新推荐文章于 2022-04-21 17:02:02 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery

本文介绍了一个使用jQuery实现的事件委托示例。在这个例子中，一个div元素作为点击事件的最外层容器，而按钮（通过class选择器指定）则作为实际触发点击事件的对象。这种方式可以有效地减少事件监听器的数量，提高页面性能。 
$("div").delegate("button","click",function(){
  
}); 




div为点击事件的最外层容器，button为点击事件的class，


                

        

    

    
  



    



                



	

		

			

				
					
关于append标签后，点击事件不可用的解决方法

				
			

			

				

					weixin_39724194的博客
				

				

					04-15
					
					654
					
				

			

		

		

			
				
今天写前端，用了append追加了一个含点击事件的文本框后，点击事件没反应。

append的代码：


var times = '<div class="row cl">\n' +
			'\t\t\t\t\t<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span&g...

			
		

	



                

            
              



	

		

			

				
					
document绑定click事件无效_Javascript事件绑定常见方案详解

				
			

			

				

					weixin_35278121的博客
				

				

					02-03
					
					2541
					
				

			

		

		

			
				
开始让js对用户的操作做出相应的响应，就要对事件进行绑定DOM元素绑定事件处理function函数，不同的操作对应不同的函数名称常见的三种绑定方式(1)在DOM元素上直接绑定事件(2)在js标签(实现分离)中绑定事件(3)通过DOM lev3级事件绑定标准(事件监听)绑定事件第一种绑定方式(DOM元素上直接绑定)<buttononclick="Mybtn()">单击butt...

			
		

	



              


  
              

                


	

		

			

				
					
[踩坑]通过append添加的元素，click事件失效问题

				
			

			

				

					weixin_44945942的博客
				

				

					09-10
					
					927
					
				

			

		

		

			
				
习惯用click直接对dom进行动态事件绑定，方便快捷，最根本的原因因为懒…
但是会遇到dom是用append动态嵌入的，click事件就会失效。
$(".myBox").click(function(){
alert(1);
});
$("#myDocument").append("");
这时候就要用事件委托，将事件委托给父元素去执行：
$("#myDocument").on(“click”,...

			
		

	





	

		

			

				
					
append添加元素后点击事件失效

				
			

			

				

					qq_40703860的博客
				

				

					04-21
					
					834
					
				

			

		

		

			
				
append

			
		

	



		

			
		



	

		

			

				
					
系列教程之jQuery动态append添加元素click点击事件失效

				
			

			

				

					种麦南山下的博客
				

				

					10-26
					
					2449
					
				

			

		

		

			
				
最近开始做前端，遇到一些问题，现在记录一下，以备不时之需。

问题描述：在div中动态添加span元素，之后执行


$(selector).click(function(){
    var param = $(this).text();
})

无法触发事件。

原因：append中的节点是在整个文档加载完之后开始添加，页面不会为append的元素初始化添加点击事件，故使用这种方式动态添加的节点中的click事件没有生效。

解决方案：事件委托方式解决，将指定的事件绑定在document上，只要appe

			
		

	





	

		

			

				
					
解决jQuery使用append添加的元素事件无效的问题

				
			

			

				

					12-12
				

			

		

		

			
				
然而，使用传统的`.click()`或`.bind()`方法为通过`.append()`等方法新增的元素添加事件处理程序可能会遇到问题，因为这些方法仅对现有DOM元素有效。为了解决这个问题，jQuery提供了`.on()`方法。  `.on()`方法自...

			
		

	





	

		

			

				
					
JS中append字符串包含onclick无效传递参数失败的解决方案

				
			

			

				

					10-20
				

			

		

		

			
				
在给定的代码片段中，`onclick`事件被用于一个`<i>`标签，该标签在`append`操作后被添加到DOM中。事件处理函数`share`接收四个参数，这些参数是从AJAX请求返回的数据动态插入的。问题在于，当`onclick`属性的值包含...

			
		

	





	

		

			

				
					
详解angularJS动态生成的页面中ng-click无效解决办法

				
			

			

				

					10-19
				

			

		

		

			
				
在AngularJS应用中，动态生成的HTML元素有时会出现`ng-click`指令失效的问题。这是因为AngularJS的编译和链接过程没有处理这些动态添加的元素，导致AngularJS无法识别并绑定相应的事件处理函数。本篇文章将详细讲解...

			
		

	





	

		

			

				
					
JS动态append之后点击事件无效

				
			

			

				

					weixin_45127183的博客
				

				

					06-07
					
					2113
					
				

			

		

		

			
				
今天做项目用了append向HTML里面添加结构代码，代码添加之后，单击事件就没反应了。搞得我一脸懵逼，调了代码很久实在不行，我百度了一下才发现，append添加的节点单击事件是不会生效的。
原因：
原来append中的节点是在整个文档加载后才添加的，页面并不会为未来的元素初始化添加点击事件，所以使用这种方式动态添加的节点中的点击事件不会生效。
解决方法：
于是我只好改用事件代理来完成这次我的项目...

			
		

	





	

		

			

				
					
append追加的元素无法触click点击事件

				
			

			

				

					qq_28332767的博客
				

				

					11-04
					
					1200
					
				

			

		

		

			
				
追加的HTML，使用click无法触发的解决办法


$("#XXX").append(_html);

$(".panel-conf a").click(function () {
//无法触发
});


写法一：使用delegate来绑定未来元素进行触发



            $(document).delegate(".panel-conf a", "click", function () {
                console.log("Hi");
            })

			
		

	





	

		

			

				
					
appndChild 为子元素添加点击事件

				
			

			

				

					harry_yaya的博客
				

				

					06-13
					
					1840
					
				

			

		

		

			
				
如果元素是appendChild 动态添加到元素中的，并且append的子元素数量为多个，那么绑定点击事件后如何让程序区别你是点击了那个元素触发的事件可能会成为一个问题。
例如我的这个实例中，我appendChild操作之后，添加进去10个img元素，然后在每个appendChild操作之前，会为img添加点击事件如下：
img.addEventListener("click",function(...

			
		

	





	

		

			

				
					
jquery append脚本增加的html onclick时间无法生效的原因以及解决方案

				
			

			

				

					it帝国的博客-辉
				

				

					08-28
					
					4817
					
				

			

		

		

			
				
jquery append脚本增加的html onclick时间无法生效的原因以及解决方案

			
		

	





	

		

			

				
					
【已解决】jquery append 绑定click事件失效解决方案

				
			

			

				

					梁先森的博客
				

				

					04-01
					
					6110
					
				

			

		

		

			
				

  因为要异步加载一些东西，并且需要在使用append添加的元素上绑定click方法，就出现了失效的情况。






&lt;div style="background-color: #ffffff;" class="addresstop"&gt;
  &lt;div class="addressli"&gt;
&lt;div class="addressli1"&gt;xxx

			
		

	





	

		

			

				
					
解决jQuery使用append添加的元素事件无效的方法

					
热门推荐

				
			

			

				

					逸尘的专栏
				

				

					03-17
					
					3万+
					
				

			

		

		

			
				
jquery api官方的例子在新增的元素上添加事件
$(document).on("click",'#lyysb a',function(){
  if(!$(this).hasClass('cur')){
    $(this).addClass('cur');
  } else {
    $(this).removeClass('cur');
  }
});on() 方法在被选元素及子元素上

			
		

	





	

		

			

				
					
append之后无法触发点击事件的解决办法

				
			

			

				

					哥是技术人
				

				

					01-22
					
					2399
					
				

			

		

		

			
				
发现是因为append后事件还没有挂上，所以无法触发点击事件，解决办法：

$('#...').live('click', function(){

});

就可以了，不过据说live效率比较低。

			
		

	





	

		

			

				
					
jQuery动态append添加元素点击事件失效

				
			

			

				

					qq_38332574的博客
				

				

					09-25
					
					1万+
					
				

			

		

		

			
				
最近开始做前端，遇到一些问题，现在记录一下，以备不时之需。

问题描述：在div中动态添加span元素，之后执行


$(selector).click(function(){var param = $(this).text();})

无法触发事件。

原因：append中的节点是在整个文档加载完之后开始添加，页面不会为append的元素初始化添加点击事件，故使用这种方式动态添加的节点中的cli...

			
		

	





	

		

			

				
					
append参数

					
最新发布

				
			

			

				

					08-08
				

			

		

		

			
				
<think>我们正在讨论编程中的`append`方法，特别是Python列表的`append()`方法。根据引用[2]，`append()`方法用于将一个项目添加到列表的末尾。它的语法是`list.append(item)`，其中`item`可以是任何类型（数字、字符串、字典、另一个列表等）。这个方法不返回任何值（返回`None`），而是直接修改原列表。

 引用[2]提供了两个示例：
 示例1：添加一个元素（字符串）到列表末尾。
 示例2：添加一个列表作为单个元素（即嵌套列表）到另一个列表。

 另外，引用[3]也提到`append()`函数用于在列表末尾添加新的对象。

 用户的问题是关于`append`参数的作用及使用方法。因此，我们需要解释`append()`方法的参数及其使用。

 同时，引用[1]提到了使用`append`添加元素时可能遇到的问题：动态添加的元素上绑定的事件可能无效。但用户当前的问题集中在参数的作用和使用方法上，所以我们可以先回答主要问题，然后如果需要的话再提及事件绑定问题（但用户没有明确问事件绑定，所以可能不需要）。

 引用[4]是关于Java的StringBuffer类的append方法，与当前问题（Python）无关，可以忽略。

 因此，回答将集中在Python列表的`append()`方法。

 步骤：
 1. 解释`append()`方法的作用：向列表末尾添加一个元素。
 2. 说明参数：只有一个参数，即要添加的元素（可以是任意类型）。
 3. 强调该方法直接修改原列表，而不返回新列表（返回None）。
 4. 给出示例代码。

 另外，根据用户指令，我们需要生成相关问题。

 注意：用户指令要求使用中文回答，行内数学表达式用$...$，独立公式用$$...$$，但本问题不涉及数学公式，所以可以忽略数学表达式的格式要求。

 回答结构：
 1. 解释`append`方法的作用和参数。
 2. 给出示例。
 3. 注意事项（如修改原列表，返回None）。
 4. 生成相关问题。</think>### `append()` 参数的作用及使用方法

`append()` 是编程中常用的方法，用于在**列表（或缓冲区）的末尾添加元素**。其核心特点是：
1. **作用**：将单个元素追加到目标对象的尾部
2. **参数**：仅接受 **1 个参数**（可以是任意数据类型）
3. **返回值**：无返回值（返回 `None`），直接修改原对象
4. **适用对象**：
   - Python 列表：`list.append(item)`
   - Java StringBuffer：`StringBuffer.append(x)`

---

### 具体使用示例（Python）
#### 基础用法：添加简单元素
```python
fruits = ["苹果", "香蕉"]
fruits.append("橙子")  # 添加字符串元素
print(fruits)  # 输出: ['苹果', '香蕉', '橙子']

numbers = [1, 2]
numbers.append(3.14)  # 添加浮点数
print(numbers)  # 输出: [1, 2, 3.14]
```

#### 添加复合对象（嵌套结构）
```python
data = [10, 20]
data.append([30, 40])  # 添加整个列表作为单个元素
print(data)  # 输出: [10, 20, [30, 40]]（二维嵌套列表）
```

#### 与其他方法的区别
| 方法       | 参数数量 | 效果                     | 返回值   |
|------------|----------|--------------------------|----------|
| `append(x)`| 1        | 将 `x` **整体** 添加到末尾 | `None`   |
| `extend(x)`| 1        | 将 `x` **拆解**后逐个添加  | `None`   |
| `insert(i,x)`| 2      | 在索引 `i` 处插入 `x`     | `None`   |

> 示例对比：
> ```python
> lst = [1, 2]
> lst.append([3,4])   # 结果: [1, 2, [3,4]]
> lst.extend([3,4])   # 结果: [1, 2, 3, 4]
> ```

---

### Java 中的 `append()`（参考引用[^4]）
在 `StringBuffer` 类中，`append()` 可接受多种类型参数：
```java
StringBuffer buffer = new StringBuffer();
buffer.append(3);       // 添加整数 → "3"
buffer.append('c');     // 添加字符 → "3c"
buffer.append("def");   // 添加字符串 → "3cdef"
System.out.println(buffer.toString());  // 输出: 3cdef
```

---

### 常见问题解决
1. **参数错误**  
   ❌ 错误：`list.append(1, 2)`（多参数）  
   ✅ 正确：`list.append([1, 2])` 或分次添加

2. **动态元素事件失效**（引用[^1]）  
   动态生成的元素需通过**事件委托**绑定事件：
   ```javascript
   // 错误：直接绑定到动态元素无效
   $("#newElement").click(...) 

   // 正确：委托给父元素
   $("#parent").on("click", "#newElement", ...)  
   ```

---

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值