动态添加的点击事件无效

分手后的思念是犯贱 2022-05-26 08:30 294阅读 0赞

动态添加checkbox按钮后点击事件无效

$(":checkbox").click(function(){
    	alert(1);
    	var classname = $(this).attr('class');
        $("."+ classname).prop("checked",false);
        $(this).prop("checked",true);
    });

如果不是动态添加，以上代码是可以实现点击checkbox框是可以弹出提示框的，但是动态添加的checkbox元素不行。

原因：

是因为这些动态加载的这些HTML页面（二），是在列表数据页面的HTML元素（一），css,js代码加载完后，再添加的HTML元素，在浏览器解析到（一）的页面元素时， 解析到js的这些绑定标签事件的js代码（上面的JS、jq代码）的时候，这些绑定事件的标签元素还没有生成，（因为js代码加载完后，才会有这些绑定事件的标签），所以这些JS 代码的绑定的事件，根本就没有绑定到这些动态加载的标签上，所以事件不会触发。

解决方法：

类似动态加载的HTML元素需要绑定事件可以用 [jQuery 事件 - *delegate*() 方法；][jQuery _ - _delegate_]

以下为参数说明：

## 定义和用法 ##

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

### 语法 ###

$(selector).delegate(childSelector,event,data,function)

<table> 
 <tbody> 
  <tr> 
   <th style="width:35%;">参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><em>childSelector</em></td> 
   <td>必需。规定要附加事件处理程序的一个或多个子元素。</td> 
  </tr> 
  <tr> 
   <td><em>event</em></td> 
   <td><p>必需。规定附加到元素的一个或多个事件。</p><p>由空格分隔多个事件值。必须是有效的事件。</p></td> 
  </tr> 
  <tr> 
   <td><em>data</em></td> 
   <td>可选。规定传递到函数的额外数据。</td> 
  </tr> 
  <tr> 
   <td><em>function</em></td> 
   <td>必需。规定当事件发生时运行的函数。</td> 
  </tr> 
 </tbody> 
</table>

所有上面的点击checkbox实现单选并弹出提示框的功能实现如下：

$("body").delegate(":checkbox","click",function(){
    	var classname = $(this).attr('class');
    	$("."+ classname).prop("checked",false);
    	$(this).prop("checked",true); 
    });

[jQuery _ - _delegate_]: http://www.w3school.com.cn/jquery/event_delegate.asp