jQuery-ReadLess切换功能 [英] Jquery - ReadLess toggle function

问题描述

我有旧的jquery代码(从1.7.1版本开始)，并希望它在3.x版本上开始工作.

I have old jquery code (from version 1.7.1) and want it to start workin on version 3.x

试图更改它，但我失败了一些:<

Tried to change it and I failed a bit :<

以下是代码示例: 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/

And here is the old code with .live() function: 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的示例.

As you can see in this code is a example of dynamic generate a div.

当您想显示更多内容时，它工作得很好，它的div类的名称不断变化，并且不知道为什么它不能输入下一部分(在此示例中为readread，可以隐藏文本的一部分).

It's working fine while you want to show more, its changing name of class of this div and don't know why it couldn't enter a next part (in this example a readless, that can hide part of text).

推荐答案

live()与标准on("click", function() {...});不同，因为live()保留了该事件，这意味着动态添加的元素仍将遵循此处理程序.通过简单地使用代码中的on，您试图将事件附加到尚不存在的元素上.

live() is different from a standard on("click", function() {...}); because live() preserves the event, meaning elements that are dynamically added will still obey this handler. By simply using on as you have in your code, you're trying to attach events to elements that don't yet exist.

幸运的是，on()允许我们使用事件委托，实际上将事件附加到不变的 parent ，从而为动态添加的元素保留事件.尝试以下方法:

Luckily, on() allows us to use Event Delegation, which actually attaches the event to the unchanging parent, thus preserving the event for dynamically-added elements. Try this instead:

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

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

这会将click事件附加到$(this)，仅当clicked元素与第二个参数.readless匹配时才会触发.

This will attach a click event to $(this), which only fires if the clicked element matches the second parameter .readless.

这篇关于jQuery-ReadLess切换功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！