iT邦幫忙

4

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 範例,這樣可以更直接瞭解。


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言