Question

所以我的代码运行不正常或者我的错误。我有一个表格，其中包含大量文本的行并且链接到模态，在关闭模态后它会重新加载表格。然后它应该调用缩短文本的函数。调用该函数不起作用。

这是来自的脚本 http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/

$('#edit-modal').on('hidden.bs.modal', function () {
    $('#table').load(document.URL +  ' #table');
    hidesome(); //this does not work or is ther 
})
function hidesome() {
            var showChar = 100;
    var ellipsestext = "...";
    var moretext = "more";
    var lesstext = "less";
    $('.more').each(function() {
        var content = $(this).html();
        if(content.length > showChar) {
            var c = content.substr(0, showChar);
            var h = content.substr(showChar-1, content.length - showChar);
            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
            $(this).html(html);
        }
    });

    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
}
$(document).ready(function() {
    hidesome();
});

冲突在哪里？我怎样才能解决这个问题？谢谢。

Answer 1

您应该将呼叫转移到hidesome到load回调，否则在您收到服务器响应之前会触发：

$('#edit-modal').on('hidden.bs.modal', function () {
    $('#table').load(document.URL +  ' #table', function() {
        hidesome();
   });    
})

Answer 2

您需要使用回调，或者命令结果看起来不同

＆＃13;

$('#edit-modal').on('hidden.bs.modal', function () {
$('#table').load(document.URL +  ' #table', function() {
    hidesome();
   });    
})
function hidesome() {
            var showChar = 100;
    var ellipsestext = "...";
    var moretext = "more";
    var lesstext = "less";
    $('.more').each(function() {
        var content = $(this).html();
        if(content.length > showChar) {
            var c = content.substr(0, showChar);
            var h = content.substr(showChar-1, content.length - showChar);
            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
            $(this).html(html);
        }
    });

    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
}
$(document).ready(function() {
    hidesome();
});

＆＃13;

<button id='#edit-modal'>test</button>

＆＃13;

重新加载div / table以及与之关联的函数

2 个答案: