Question

    <script>
    function textoverflow(ele, num){
        ele.each(function(){
            var count = $(this).text().length;
            if(count > num){
                var org = $(this).text();
                $(this).text($(this).text().slice(0,num) + '... ').append('<span class="readMore">More</span>');
            }

            $('.readMore').click(function(){
                $(this).parent().text(org);
            });
        });
    }

    $(document).ready(function(e) {
        textoverflow($('.text'),10);

        $(document).delegate('#click', 'click', function(){

            $.get('/newpage.php', function(data){
                $('div').append(data);
            }); 
        });

    });
    </script>
    <p class="text">abcdefghijklmnopq</p>
    <p class="text">abcdefghijklmnopq</p>

    <a id="click">Click me</a><br />
    <div></div>

//newpage.php
<p class="text">abcdefghijklmnopq</p>
<p class="text">abcdefghijklmnopq</p>

我有一个函数可以截断多行文本并附加一个按钮更多，

它工作正常但是当我尝试使用jquery从其他页面追加数据时，此函数不适用于新页面。

http://jsfiddle.net/CsHwN/

是解决这个问题的方法吗？

Answer 1

你需要在将ajax的结果附加到div之后调用textoverflow函数。 demo

Answer 2

首先

$('.readMore').click(function(){
                $(this).parent().text(org);
            })

不要将这些代码放在每个代码中，每个代码都放在一边，然后使用on点击，因为数据动态地附加到div，

    $('body').on('click','.readMore',function(){
                    $(this).parent().text(org);
                })

然后

function textoverflow(ele, num){
    ele.each(function(){
        var count = $(this).text().length;
        if(count > num){
            var org = $(this).text();
            $(this).data('origin-text',org);
            $(this).text($(this).text().slice(0,num) + '... ').append('<span class="readMore">More</span>');
        }
    });
}

$(document).ready(function(e) {
    textoverflow($('.text'),10);

    $(document).delegate('#click', 'click', function(){
        $('div').append('<p class="text">abcdefghijklmnopq</p>');
       textoverflow($('div .text'),10);
    });

    $('body').on('click','.readMore',function(){
        $(this).parent().text($(this).parent().data('origin-text'));
    });
});

然后将组织文本保存在data中，因此，textoverflow只会处理truncet文本。

jquery函数不适用于获取追加页面

2 个答案: