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切换功能

回答

相关问题