jQuery 1.7 透过 on 来绑定事件

原文来自: jQuery 1.7 透过 on 来绑定事件

既上一篇作者写了 Javascript 前端工具 Backbone.js Framework 初学介绍，这次来将程式改写成 jQuery 写法，藉这个机会来介绍 jQuery 新功能 on API，底下来看看 jQuery event handle 的演进

//在 jQuery 1.3 以上版本$(selector).live(events, data, handler);//在 jQuery 1.4.3 以上版本$(document).delegate(selector, events, data, handler);//在 jQuery 1.7 以上版本$(document).on(events, selector, data, handler);

上面三种写法都可以榜定网页上全部元件，如果只是单纯只是用 click bind event 的话，那只要新增的元件就无法作用，讲得有点抽象，底下直接看个例子:

html 程式码:

<div class="container well">    <h1>jQuery Click Event</h1>    <p> </p>    <button class="btn btn-primary add">Click me to add new item</button>    <ul style="margin-top:5px;margin-bottom:5px;" class="li">        <li style="margin-top:5px; font-size:1.2em">I am old item.  <button class="btn btn-danger delete">Delete</button></li>        <li style="margin-top:5px; font-size:1.2em">I am old item.  <button class="btn btn-danger delete">Delete</button></li>        <li style="margin-top:5px; font-size:1.2em">I am old item.  <button class="btn btn-danger delete">Delete</button></li>        <li style="margin-top:5px; font-size:1.2em">I am old item.  <button class="btn btn-danger delete">Delete</button></li>    </ul></div>

jQuery Click 事件

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>(function ($) {    $(".add").click(function(){        $(".li").append('<li style="margin-top:5px; font-size:1.2em">I am new item.  <button class="btn btn-danger delete">Delete</button></li>');    });    $(".delete").click(function(){        $(this).parent().remove();    });})(jQuery);</script>

上面例子，大家可以发现只要是透过 button 新增加的 li element 都不可以被删除，原因就是在 .delete 是 bind 在 click 事件。这时候就要用 jQuery.on API 来重新实做，其实很简单，只要将 click 改成 on 就完成了，请取代底下程式码。

$(".delete").click(function(){    $(this).parent().remove();});

换成

$(document).on('click', '.delete', function(event){    $(this).parent().remove();});

直接看 Demo 範例，这样可以更直接了解。