jQuery的 - ReadLess切換功能

我已經老了jQuery代碼（從1.7.1版本），並希望它開始幹活就3.x版本jQuery的 - ReadLess切換功能

試圖去改變它，我失敗了一下：<

下面是例子的代碼：http://jsfiddle.net/lilpri/S3Rfu/106/

$(function(){ 
$('.opis').each(function(){ 
    $(this).append('<div class="readmore">czytaj więcej...</div>'); 
    var textelement = $(this).find('.text'); 
    var wys = textelement.height(); 
    textelement.css('height', '80px'); 
    $(this).find('.readmore').on('click', function(){ 
     textelement.animate({height: wys}, 1000); 
     $(this).attr('class', 'readless'); 
     $(this).text('czytaj mniej...'); 
    }); 
    $(this).find('.readless').on('click', function(){ 
     textelement.animate({height: '80px'}, 1000); 
     $(this).attr('class', 'readmore'); 
     $(this).text('czytaj więcej...'); 
    }); 
}); });

這裏是舊代碼.live（）函數：http://jsfiddle.net/lilpri/S3Rfu/105/

$(function(){ 
$('.opis').each(function(){ 
    $(this).append('<div class="readmore">czytaj więcej...</div>'); 
    var textelement = $(this).find('.text'); 
    var wys = textelement.height(); 
    textelement.css('height', '80px'); 
    $(this).find('.readmore').live('click', function(){ 
     textelement.animate({height: wys}, 1000); 
     $(this).attr('class', 'readless'); 
     $(this).text('czytaj mniej...'); 
    }); 
    $(this).find('.readless').live('click', function(){ 
     textelement.animate({height: '200px'}, 1000); 
     $(this).attr('class', 'readmore'); 
     $(this).text('czytaj więcej...'); 
    }); 
});});

正如你在這段代碼中看到的一個動態生成div的例子。

它工作正常，而你想顯示更多，其更改名稱的這個div類，不知道爲什麼它不能進入下一個部分（在這個例子中是一個不讀，可以隱藏部分文本）。

來源

2017-02-03 lilpri

live()是從標準on("click", function() {...});不同，因爲live()保留的情況下，這意味着動態添加將仍然服從該處理程序的元件。通過像在代碼中一樣使用on，您試圖將事件附加到尚不存在的元素。

幸運的是，on()允許我們使用Event Delegation，這實際上附着事件到不變父，從而保留用於動態地添加元素的事件。試試這個：

//YOUR OLD CODE 
$(this).find('.readless').live('click', function(){ 

//THE NEW CODE 
$(this).on('click', '.readless', function(){

這將click事件附加到$(this)，其中如果點擊的元素，第二個參數.readless只匹配火災。

來源

2017-02-03 14:47:25 Santi

謝謝你，它的工作權現在 – lilpri

jQuery的文檔展示瞭如何最好地轉換這樣的：

$("a.offsite").live("click", function() { 
    alert("Goodbye!"); 
}); 
$(document).on("click", "a.offsite", function() { 
    alert("Goodbye!"); 
});

http://api.jquery.com/live/

你live事件處理程序將轉換爲：

$(this).on('click', '.readmore', function(){

來源

2017-02-03 15:16:40 Curt

jQuery的 - ReadLess切換功能

回答

相關問題