Question

我有旧的jquery代码（来自版本1.7.1）并且希望它在版本3.x上开始工作

试图改变它而我失败了一点：＆lt;

以下是代码示例：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类的名称，并且不知道为什么它不能进入下一个部分（在这个例子中是无读取的，可以隐藏部分文本）。

Answer 1

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(){

Answer 2

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(){

这会将点击事件附加到$(this)，只有在点击的元素与第二个参数.readless匹配时才会触发。

Jquery - ReadLess切换功能

2 个答案: