1.jQuery动态添加的源码元素绑定事件处理函数代码
2.jQuery的.bind，live和.delegate的区别
3.Jquery中bind和live的区别
4.jquery bind 实现绑定click事件

jQuery动态添加的元素绑定事件处理函数代码

       我当时的处理方法是在添加的时候手工绑定事件处理函数。不过新版的源码jquery已经添加了这个功能。我们已经不需要为此烦恼了。源码echarts 主题 源码

       参考：/live/

       以前我们定义事件，源码比如为元素定义单击事件是源码源码讲解 直播这样写的：

       复制代码

       代码如下:

       $('input').click(function

       ()

       {

       //处理代码

       });

       或

       复制代码

       代码如下:

       $('.clickme').bind('click',

       function()

       {

       //

       Bound

       handler

       called.

       });

       但是这只能是对已经加载好的元素定义事件，那些后来添加插入的源码源码资本 晋升元素则需要另行绑定。即使你使用jquery的源码clone函数，它并不能将事件也复制（到目前为止我还不清楚它是源码为什么这样定义，是源码没法复制还是刻意这么处理，以防止出现某些异常，源码这还有待去分析一下jquery的源码源代码）。

       现在，源码使用live你可以轻松搞定，源码南京溯源码

       $('.clickme').live('click',源码

       function()

       {

       //

       Live

       handler

       called.

       });这样，你即使在后面动态插入的源码威哥源码元素，也会被绑定事件，$('body').append('<div

       class="clickme">Another

       target</div>');

jQuery的.bind，live和.delegate的区别

       ã€€ã€€.bind()

       ã€€ã€€$('a').bind('click', function() { alert("That tickles!") });

       ã€€ã€€è¿™æ˜¯æœ€ç®€å•çš„绑定方法了。JQuery扫描文档找出所有的$(‘a’)元素，并把alert函数绑定到每个元素的click事件上。

       ã€€ã€€.live()

       ã€€ã€€$('a').live('click', function() { alert("That tickles!") });

       ã€€ã€€JQuery把alert函数绑定到$(document)元素上，并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上，它就查看该事件是否是一个click事件，以及该事件的目标元素与’a’这一CSS选择器是否匹配，如果都是的话，则执行函数。

       ã€€ã€€live方法还可以被绑定到具体的元素(或context)而不是document上，像这样：

       ã€€ã€€$('a', $('#container')[0]).live(...);

       ã€€ã€€.delegate()

       ã€€ã€€$('#container').delegate('a', 'click', function() { alert("That tickles!") });

       ã€€ã€€JQuery扫描文档查找$(‘#container’)，并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话，它就执行函数。

       ã€€ã€€å¯ä»¥æ³¨æ„åˆ°ï¼Œè¿™ä¸€è¿‡ç¨‹ä¸Ž.live()类似，但是其把处理程序绑定到具体的元素而非document这一根上。精明的JS’er们可能会做出这样的结论，即$('a').live()

        == $(document).delegate('a')，是这样吗?嗯，不，不完全是。

       ã€€ã€€ä¸ºä»€ä¹ˆ.delegate()要比.live()好用

       ã€€ã€€åŸºäºŽå‡ ä¸ªåŽŸå› ï¼Œäººä»¬é€šå¸¸æ›´æ„¿æ„é€‰ç”¨jQuery的delegate方法而不是live方法。考虑下面的例子：

       ã€€ã€€$('a').live('click', function() { blah() });

        　　// 或者

       ã€€ã€€$(document).delegate('a', 'click', function() { blah() });

       ã€€ã€€é€Ÿåº¦

       ã€€ã€€åŽè€…实际上要快过前者，因为前者首先要扫描整个的文档查找所有的$(‘a’)元素，把它们存成jQuery对象。尽管live函数仅需要把’a’作为串参数传递以用做之后的判断，但是$()函数并未知道被链接的方法将会是.live()。

       ã€€ã€€è€Œå¦ä¸€æ–¹é¢ï¼Œdelegate方法仅需要查找并存储$(document)元素。

       ã€€ã€€ä¸€ç§å¯»æ±‚避开这一问题的方法是调用在$(document).ready()之外绑定的live，这样它就会立即执行。在这种方式下，其会在DOM获得填充之前运行，因此就不会查找元素或是创建jQuery对象了。

       ã€€ã€€çµæ´»æ€§å’Œé“¾èƒ½åŠ›

       ã€€ã€€live函数也挺令人费解的。想想看，它被链到$(‘a’)对象集上，但其实际上是在$(document)对象上发生作用。由于这个原因，它能够试图以一种吓死人的方式来把方法链到自身上。实际上，我想说的是，以$.live(‘a’,…)这一形式作为一种全局性的jQuery方法，live方法会更具意义一些。

       ã€€ã€€ä»…支持CSS选择器

       ã€€ã€€æœ€åŽä¸€ç‚¹ï¼Œlive方法有一个非常大的缺点，那就是它仅能针对直接的CSS选择器做操作，这使得它变得非常的不灵活。

       ã€€ã€€æ¬²äº†è§£æ›´å¤šå…³äºŽCSS选择器的缺点，请参阅Exploring jQuery .live() and .die()一文。

       ã€€ã€€æ›´æ–°ï¼šæ„Ÿè°¢Hacker News上的pedalpete和后面评论中的Ellsass提醒我加入接下来的这一节内容。

       ã€€ã€€ä¸ºä»€ä¹ˆé€‰æ‹©.live()或.delegate()而不是.bind()

       ã€€ã€€æ¯•ç«Ÿï¼Œbind看起来似乎更加的明确和直接，难道不是吗?嗯，有两个原因让我们更愿意选择delegate或live而不是bind：

       ã€€ã€€ 为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为bind是直接把处理程序绑定到各个元素上，它不能把处理程序绑定到还未存在于页面中的元素之上。

       ã€€ã€€

       å¦‚果你运行了$(‘a’).bind(…)，而后新的链接经由AJAX加入到了页面中，则你的bind处理程序对于这些新加入的链接来说是无效的。而另一方面live和delegate则是被绑定到另一个祖先节点上，因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。

       ã€€ã€€

       æˆ–者为了把处理程序附加到单个元素上或是一小组元素之上，监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的个元素上。把处理程序附加到一个(或是一小组)祖先元素上而不是直接把处理程序附加到页面中的所有元素上，这种做法带来了性能上的好处。

       ã€€ã€€åœæ­¢ä¼ æ’­

       ã€€ã€€æœ€åŽä¸€ä¸ªæˆ‘想做的提醒与事件传播有关。通常情况下，我们可以通过使用这样的事件方法来终止处理函数的执行：

       ã€€ã€€$('a').bind('click', function(e) {

        　　e.preventDefault();

        　　// 或者

       ã€€ã€€e.stopPropagation();

        　　});

       ã€€ã€€ä¸è¿‡ï¼Œå½“我们使用live或是delegate方法的时候，处理函数实际上并没有在运行，需要等到事件冒泡到处理程序实际绑定的元素上时函数才会运行。而到此时为止，我们的其他的来自.bind()的处理函数早已运行了。

Jquery中bind和live的区别

       ä»¥click事件为例

       Jquery中绑定事件有三种方法：

       1、target.click(function(){ });

       2、target.bind("click",function(){ });

       3、target.live("click",function(){ });

       live方法，只有在click事件发生的时候，才会去检测绑定事件的对象target是否存在，所以live方法可以实现后来新增子元素的事件的绑定。

       bind会在事件在绑定阶段bind时就会判断绑定事件的对象target是否存在，而且只针对当前元素进行绑定，而不是绑定到父节点上。

       ä»¥ä¸‹ä¸¾ä¾‹ã€‚

       æŒ‰é’®1会触发bind和live的绑定事件。

       æŒ‰é’®2会触发live的绑定事件。不会触发bind的事件，因为绑定click事件的时候按钮2还没有生成。

<script type="text/javascript">

           $(function () {

               $("#btn1").bind("click", function () {  alert("bind"); });

               $("#btn2").bind("click", function () {  alert("bind"); });

               $("#btn1").live("click", function () {  alert("live"); });

               $("#btn2").live("click", function () {  alert("live"); })

               $("body").append("<span id=\"btn2\">按钮2</span>")

           });

       </script>

       <body>

           <span id="btn1">按钮1</span>

       </body>

jquery bind 实现绑定click事件

       ä½ è¿™æ ·ä¸è¡Œï¼Œé‡Œé¢çš„function 相当于创建了一个函数。但并没有调用他。并且里面的this也不是指向当前click的元素了。

       ä½ å¯ä»¥å‚考下面的代码。

<div>

               </div>

           <script type="text/javascript">

               $(function () {

                   $("div").bind("click", function () {

                       var me = this;

                       var a = function () {                                 //如果把这行function(){ $(this).html()}换成$(this).html()就可以

                           $(me).html();                 //这是为啥呢，鼠标点击不就执行function么，我在function里又定义

                       };

                       a();                                          //一个function怎么就不行了呢，按理应该执行啊

                   }

                   );

               })

           </script>