1

次の問題があります。JavaScriptでカスタマイズされたスクロールバーのクラス「スクロール」でdivを追加しています。動的にdivを追加しています。その後、スクロールバーを設定しました。

問題は、追加された div では機能しないことです。ドキュメントにハードコードされた div で試してみると、すべて正常に動作します。

function appenddiv() {
    $('#container').append('<div id="test" class="scrolling"> Lorem Ipsum ...... </div>');

    $('.scrolling').scrollbar();
}

私も試しました

function appenddiv() {
    $('#container').append('<div id="test"> Lorem Impsum .....</div>');
    $('#test').addClass('scrolling');

    $('.scrolling').scrollbar();
}

ボタンだけでやってみた

<a href="#" onClick="appenddiv">Click here</a>

機能する唯一のものは次のとおりです。

<body>
   <div id="test" class="scrolling"> Lorem Ipsum ..... </div>

   <script type="text/javascript">
     $(document).ready(function() {
         $('.scrolling').scrollbar(); //this is not fired in the examples above!
        });

私が言ったように、クラス スクロールバーを含む div テストが既に本体にある場合にのみ機能します。関数 scrollbar は、jquery でカスタマイズされたスクロールバー スクリプトで、ここにあります。

4

4 に答える 4

3

問題は、onClickボタンのハンドラーが実際にメソッドを呼び出しているのではなく、単に参照していることです。呼び出すには括弧を使用する必要があります。デフォルトのリンク アクションを防止するには、false を返します。だからこれを試してください：

<a href="#" onClick="appenddiv(); return false;">Click here</a>

また、これを呼び出すときに関数が定義されていることを確認する必要があります。jQuery を使用しているため、これを行う最善の方法は、まったく使用せずonclick、代わりにすべてをドキュメント対応コールバックに入れ、オンクリック ハンドラーを使用することです。したがって、html リンクは次のようになります。

<a href="#" id="scrollbar-link">Click here</a>

そして、あなたのJavaScriptは次のようになります：

$(document).ready(function() {
    function appenddiv() {
        var $scrolling = $('<div id="test" class="scrolling"> Lorem Ipsum ...... </div>');
        $scrolling.appendTo($('#container')).scrollbar();
    }

    $('#scrollbar-link').on('click', function(ev) {
        ev.preventDefault(); // This stops the browser from following the link
        appenddiv();
    });
});
于 2013-02-21T21:36:35.060 に答える
0

あなたの最初の例では$('.scrolling').scrollbar();

する必要があります$('.scrollbar').scrollbar();

そして、あなたの2番目の例では、$('.test').addClass('scrolling');

する必要があります$('#test').addClass('scrolling');

#id を.参照し、クラスを参照します。

于 2013-02-21T21:38:34.987 に答える
0

どちらにも CSS セレクター エラーがあります。

最初のケースでは、 class の jQuery セレクターを一致させようとしています.scrollingが、クラスは.scrollbarドキュメントに追加するときのものであるため、セレクターは一致しません。

2 番目のケースでは、2 行目の jQuery セレクターは class 用ですが、要素にid.testを追加しています。繰り返しますが、これはドキュメント内のどの要素とも一致しません。 #test

これらのエラーを除けば、一見するとコードは正常に動作するように見えます。これらのエラーを修正して、もう一度やり直してください。

于 2013-02-21T21:37:07.353 に答える
-1

最初のフラグメントでは、class = "scrollbar" で div を追加しようとしますが、"scrolling" クラス セレクター ($('.scrolling').scrollbar();) を使用します。同じ名前を使用してみてください。

2 番目のフラグメントでは、id = "test" で div を追加しますが、その後、class = "test" で要素にクラスを追加しようとします。使ってみる

$('#test').addClass('scrolling');

また

$('#test').scrollbar();
于 2013-02-21T21:44:30.017 に答える