不知道如何使用版本1.7中的jQuery「live」

這裏有一個顯示/隱藏文本的小片段。問題在於click事件不會針對「無讀」類觸發。通常我會使用jQuery的「live」功能，但由於它被棄用而贊成「on」，我不知道該怎麼做？不知道如何使用版本1.7中的jQuery「live」

這裏有一個的jsfiddle： http://jsfiddle.net/SSAu2/

代碼：

$(document).ready(function(){ 

    var showHiddenText = function(e){ 

     e.preventDefault(); 

     var $this = $(this); 
     $this.prev().fadeIn(); 
     $this.text("less").removeClass("readmore-anchor").addClass("readless-anchor"); 
    }; 

    var hideShownText = function(e){ 

     e.preventDefault(); 

     var $this = $(this); 
     $this.prev().fadeOut(); 
     $this.text("more").removeClass("readless-anchor").addClass("readmore-anchor"); 
    }; 

    $(".readmore").after("<a href='#' class='readmore-anchor'>More</a>"); 
    $(".readmore-anchor").on("click", showHiddenText); 
    $(".readless-anchor").on("click", hideShownText); 

});

來源

2012-07-14 Enrique Moreno Tent

+1（1）認識到['.live（）'已被棄用（HTTP：// liveisdeprecated （2）想做點什麼。在這裏仍然有很多問題和答案仍然使用'.live（）'。 – 2012-07-14 14:55:21

謝謝。我認爲這很重要，所以我甚至在我的博客上寫了一篇關於它的文章:) – 2012-07-14 15:01:38

當DOM準備函數執行，在時間不存在任何匹配選擇器'.readless-anchor'的元素。 .on()的工作方式是，它需要一個元素用作父級。所有發生在其子孫後面的事件都會讓父母冒出來，並會調用相應的處理程序。這就是爲什麼jquery的主要選擇器已經存在的重要原因。

從documentation，

的事件處理程序僅結合到當前選擇的元素;在代碼調用.on（）時，頁面上必須存在。

.on()函數的第二個參數是用於篩選的選擇器。

對於您的情況，您可以將.on()定位在body上，並根據您的類進行過濾。

$("body").on("click", ".readmore-anchor", null, showHiddenText); 
$("body").on("click", ".readless-anchor", null, hideShownText);

這有點過相當於你可能使用做了什麼.live()

$("body").find(".readmore-anchor").live('click', showHiddenText);

來源

2012-07-14 13:10:07

謝謝，這是一個很好的解釋:) – 2012-07-14 13:39:15

這很不錯+1 – Rasmus 2012-07-14 13:40:34

你可以嘗試這樣的：

$(document).on("click",".readmore-anchor", showHiddenText); 
$(document).on("click",".readless-anchor", hideShownText);

Live demo

來源

2012-07-14 13:00:01 Engineer

謝謝！很棒！ – 2012-07-14 13:38:53

不知道如何使用版本1.7中的jQuery「live」

回答

相關問題