为什么要用on()而不直接使用click-优快云博客

为什么要用on()而不直接使用click
http://stackoverflow.com/questions/10082031/why-use-jquery-on-instead-of-click
http://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on

有两个好处使用on()可以为动态生成的元素绑定事件
其次使用on可以只为父元素绑定事件不需要为子元素都一个一个的绑定

首先需要明白并不是说动态生成的元素就一定不能用.click的方式来绑定事件
(否则逻辑上说不通对吧)
在使用$('.xxx').click的时候只要$('.xxx')可以得到元素就可以绑定
只是你需要特别注意执行顺序使用$('.xxx') 之前 .xxx这个元素已经在DOM中

是不是使用 $('.xxx').on 就可以不用注意呢？也不是要不然$('.xxx')的到的是undefined怎么可能绑定事件呢

这样子写两者是完全等价的
$(".close-box").click( function() {
MoneyBox.closeBox();
return false;
});

$(".close-box").on("click", function () {
MoneyBox.closeBox();
return false;
});

那应该如何用on()呢？
$('#container').on('click', '.elementClass', function() {
});
其中 #container 是 .elementClass的前辈且最好保证是静态的元素，否则还是要注意绑定的时机...
这样在click #container中的.elementClass元素就可以执行对应的处理了\

想要取消事件？使用off()
http://www.andismith.com/blog/2011/11/on-and-off/

==============这是之前写的===================

都说on是用于动态添加的元素的事件。但是你不觉得奇怪嘛，难道动态添加的元素就不能用普通的事件绑定，这样说不通啊！

其实是on可以在元素添加到dom之前绑定，而对于普通绑定，只要元素已经出现在了dom中，不论是否动态添加事件当然也是生效的

    $('body').on('click', '.d1', function(event) {
      //event.preventDefault();
      console.log('on0');//ok
    });


    console.log($('.d1'));
    $('.d1').on('click',  function(event) {
        console.log('on1'); //not working  becasuse $('.d1') is undefined
    });


    $('.d1').click(function(event) {
      /* Act on the event */
      console.log('click0');// not working same reason as before
    });


    var dq=$('<div class="d1"></div>');
    $('body').append(dq);


    $('.d1').click(function(event) {
      /* Act on the event */
      console.log('click');
    });

可以看到对于on 绑定也是有要求的，如果on的左边的对象不存在当然绑定也是不行的。

on左边应该是一个已经存在的父元素，待绑定click对象是d1 这样就是在元素添加到DOM之前指定了事件处理

转载于:https://www.cnblogs.com/cart55free99/p/3858019.html