0

我有这段代码可以通过切换显示更多/更少我的评论。它工作得很好。但是我有另一种添加评论的形式，该形式使用 jQuery ajax。因此，在添加表单后，脚本无法正常工作。我必须重新加载整个页面才能显示它正常工作。在源代码中，我看到加载了脚本。它也在重新加载的部分中。

也许我应该改变准备加载？

编辑： onload 也无济于事；（

<script>
    $(document).ready( function () {
        $(".comment p").each(function() {
            var val = $.trim(this.innerHTML);
            var parsed = val.split(/\s+/);
            var cut = parsed;

            // for each word
            for (var i = 0, k = 0; i < parsed.length; i++) {
                k += parsed[i].length + 1;

                if (k - 1 > 50) {
                    cut = parsed.slice(0, i);
                    break;
                }
            }

            // if one long word
            if (cut.length == 0) {
                cut.push(parsed[0].substring(0, 50));
            }

            val = cut.join(" ");

            // if the text is long enough to cut
            if (cut.length != parsed.length) {
                this.innerHTML = val.replace(/[.,;?!]$/, "")
                    + "<span>...</span> ";

                $("<span />")
                    .css("display", "none")
                    .html(parsed.slice(cut.length).join(" ") + " ")
                    .appendTo(this);

                $("<a />", {
                    href : "#",
                    text : "[show more]"
                }).on("click", function(e) {
                    var sh = this.innerHTML == "[show more]";
                    $(this).prev("span").toggle(sh).prev("span").toggle(!sh);
                    this.innerHTML = sh ? "[show less]" : "[show more]";
                    e.preventDefault();
                }).appendTo(this);
            } else {
                this.innerHTML = val;
            }
        });
    });
</script>

编辑：我的 ajax 调用看起来像这样（我正在使用 CodeIgniter）：

$.ajax({
    url : "<?php echo site_url('comments/add'); ?>",
    type : 'POST',
    data : form_data,
    success : function(msg) {
        var pathname = window.location.pathname;
        $('.comments-tbl-div').load(pathname + ' .comments-tbl-div');
        $('#comment-form-part').html(msg);
    }
});
4

1 回答 1

1

问题是 ready 事件仅被触发一次（在加载文档时）。ajax 引擎在准备好文档后触发成功事件。所以你应该重新调用你的 showMore 引擎。

首先，将您的代码放入可调用函数中

<script>
        function showMoreEngine($els) {
            $els.each(function() {
            var val = $.trim(this.innerHTML),
                parsed = val.split(/\s+/),
                cut = parsed;

            // for each word
            for (var i = 0, k = 0; i < parsed.length; i++) {
                k += parsed[i].length + 1;

                if (k - 1 > 50) {
                    cut = parsed.slice(0, i);
                    break;
                }
            }

            // if one long word
            if (cut.length == 0) {
                cut.push(parsed[0].substring(0, 50));
            }

            val = cut.join(" ");

            // if the text is long enough to cut
            if (cut.length != parsed.length) {
                this.innerHTML = val.replace(/[.,;?!]$/, "")
                    + "<span>...</span> ";

                $("<span />")
                    .css("display", "none")
                    .html(parsed.slice(cut.length).join(" ") + " ")
                    .appendTo(this);

                $("<a />", {
                    href : "#",
                    text : "[show more]"
                }).on("click", function(e) {
                    var sh = this.innerHTML == "[show more]";
                    $(this).prev("span").toggle(sh).prev("span").toggle(!sh);
                    this.innerHTML = sh ? "[show less]" : "[show more]";
                    e.preventDefault();
                }).appendTo(this);
            } else {
                this.innerHTML = val;
            }
        });
        }
</script>

在就绪事件中调用此函数

   $(document).ready(function(e) { showMoreEngine($(".comment p"))});

在你的 ajax 引擎中

 $.ajax({
        url : "<?php echo site_url('comments/add'); ?>",
        type : 'POST',
        data : form_data,
        success : function(msg)
                  {
                        var pathname = window.location.pathname;
                        // added here a callback function
                        $('.comments-tbl-div').load(pathname + ' .comments-tbl-div',{},function() {showMoreEngine( $(this).find('.comment p') )});
                        $('#comment-form-part').html(msg);
                        showMoreEngine( $('#comment-form-part').find('.comment p') );
                    }
                });

我认为您可以优化代码......但这可以作为一个起点。

于 2012-09-22T07:40:28.470 回答