3

問題はこれです：

Ajax で送信する単純な 2 つのフィールド フォームがあります。完了したら、変更を反映するために 2 つの div をリロードします。

jQueryプラグインを除いて、すべてが完璧に機能しています。シンプルに呼び出せるシンプルなプラグインです

function(){
    $('.myDiv').scrollbars();
}

シンプルで使いやすいですが、Ajax をロードしたコンテンツでは機能しません。フォームを投稿してdivをリロードするために使用するコードは次のとおりです。

$(function() {
    $('#fotocoment').on('submit', function(e) {
        $.post('submitfotocoment.php', $(this).serialize(), function (data) {
            $(".coment").load("fotocomajax.php");
        }).error(function() {

        });
        e.preventDefault();
    });
});

関数を作成して Ajax で呼び出してみましたが、成功しませんでした。誰かがそれを機能させる方法を教えてもらえますか? その単純なプラグインをどのように再ロードまたは再初期化するか、またはおそらく更新することができますか? 私は、ajaxStop、ajaxComplete など、多くの jQuery の機能を調べました...何も機能していないように見えるか、ここで何か間違ったことをしています。

4

4 に答える 4

2

DOM Document がすでにロードされた後に要素を動的にロードしている場合 (あなたの場合は AJAX を介して)、要素への単純なバインド .scrollbars() は $(document).ready() であっても機能しません-「を使用する必要があります」ライブ」イベント - jQuery が動的に追加されたコンテンツを「キャッチ」する方法:

$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler); // jQuery 1.7+

ソース: jQuery サイト

于 2013-08-13T13:59:26.477 に答える
1

私があなたを正しく理解しているなら、これを試してください：

var scrollelement = $('.myDiv').scrollbars();
var api = scrollelement.data('jsp');

$(function () {
    $('#fotocoment').on('submit', function (e) {
        $.post('submitfotocoment.php', $(this).serialize(), function (data) {
            $(".coment").load("fotocomajax.php");
            api.reinitialise();
        }).error(function () {

        });
        e.preventDefault();
    });
});

reinitialise - 標準 API 関数、スクロールバーを更新します。

于 2013-08-16T11:04:53.703 に答える
1

ブラウザのコンポーネントを複製しようとするようなプラグインの使用に完全に反対している場合でも、いくつかのヒントを提供しようとします.

この scrollbars pluginを使用していると思います。この場合、スクロールバー要素を再初期化することができます。これを行うには多くの方法があります。次の例のように、要素を再度作成できます

<div class="holder">
  <div class="scrollme">
    <img src="http://placekitten.com/g/400/300" />
  </div>
</div>

.....

$('.scrollme').scrollbars();

...

fakedata = "<div class='scrollme'>Fake response from your server<br /><img src='http://placekitten.com/g/500/300' /></div>";
$.post('/echo/html/', function(response){
    $('.holder').html(fakedata);
    $('.scrollme').scrollbars();
});

代わりに、すでに初期化されているウィジェットのコンテンツを更新したい場合は、さらに複雑になります。プラグインが初期化されると、その「魔法」を実行するためにいくつかのカスタム ラッパーでコンテンツが移動されるため、正しい要素を更新してから、ウィンドウでサイズ変更イベントをトリガーし、願わくばウィジェットが再評価されるようにしてください。

それでも解決しない場合は、HTML 構造についてさらに詳細を考えてみてください。

于 2013-08-14T07:52:23.460 に答える
1

私が抱えているこの問題に時間を割いて答えてくれた皆さんに感謝したいと思います。しかし、4日間の闘争と「発明」の後に答えが来ました:)、それはJSまたはJqueryソリューションではなく、ファイル内の単純なロジックです。

もともと、ここにいる他のプログラマーと同じように、ドキュメントの先頭にある「head」タグで関数とプラグインを呼び出します (例外もあります)。

それから私の訪問者は私のブログを開いてそれを読み、コメントを投稿したいと考えています。しかし、多くのコメントがあり、ページ全体をスクロールしたり、デフォルトのスクロール バーを使用したりしたくありません。それらが見苦しく、スタイルを設定するためのクロス ブラウザー サポートがないからです。

したがって、コメントを含むフォームを .post() し、それらすべてを含むフォームをリロードするだけです。当然 .scrollbars() プラグインは機能しません。ここに解決策があります。

私がこれを置くと：

<script>$('.showcoment').scrollbars();</script>

読み込まれたドキュメントの先頭 ( load() を使用) では、 HTML ではなく、自動的に削除されるため、機能しません。しかし ！！！私がこれを行う場合：

<div><script>$('.showcoment').scrollbars();</script></div>

ロードされたドキュメントの同じ先頭で、MAGIC ....動作します。そこにたどり着いたロジックは、javascript の基礎で見つけました。スクリプトが HTML 要素内にある場合、問題なく解析されます。

私の経験が他の人に役立つことを願っています。

于 2013-08-16T15:26:12.157 に答える