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 イベントが (ドキュメントのロード時に) 1 回だけ発生することです。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 に答える