Jquery .delegate()方法

这个问题一直纠结了我很久，但没想到Jquery 居然是有提供获取方法的，现在才看到感觉实在坑爹。

用过Jquery 的朋友都知道通过append动态添加元素后无法获取到该元素，包括值与内容，原因是因为当文件加载完成时Jquery会获取所有元素保存成Jquery元素，但只在文档加载进来时获取一次，之后通过动态添加的就不会再获取得到(这些是本人自己一个种理解方式)，因此官方有提供了delegate()方法来处理这个问题。

定义和用法

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。 使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

语法

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

HTML：

<div class="wrapper"></div>

JS:

<script>
 $(function(){
   //往之前的HTML中动态添加个.code的div进去
   $('.wrapper').append('<div class="code">1111111111111</div>');
 });
</script>

添加后效果：

用delegate添加梆定事件来获取元素：

$(document).delegate('.code','click', function() {
  alert($(this).html()); //获取元素的内容 
});

通过点击后的获取效果：

原理如下：

JQuery扫描文档查找$(document)，并使用click事件和选择器获取’.code’并把alert函数绑定到$(document)上。任何时候只要有事件冒泡到$(document)上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话，它就执行函数。很显然，通过delegage方法能获取到该元素，包括其值与任何自身的内容。

本文完 END

@本文作者: Cosplay，Cosplay-前端笔记

本文地址：https://luozhihao.wodemo.com/entry/321617