0

ちょっと私は、テーブルに jQuery-UI オブジェクトを含むサイトを持っています。私がしていることは、テーブルを localstorage に保存することです。このようにして、ユーザーはさまざまな「プロジェクト」をロードできます。

保存したテーブルを読み込んだ後、すべてのボタンのハンドラも更新します。その後はうまくいきます。ただし、すべての jQuery-Uis の機能は提供されなくなりました。updateHandlers 関数で次のコードを試しました。

//Initial setup for jQuery UI
$( '#infoImg' ).tooltip();
$( '#volSlider' ).slider({ max: 100, min: 0});

しかし、これは私のテーブル内の要素の最初の出現に対してのみ機能します。他のすべては機能しません。

私は jQuery と Javascript の初心者で、完全に間違ったことをしているのかもしれません..しかし、それは何ですか?

私は updateHandler 関数の他のものにうんざりしています:

$(this).parent().find( '.infoImg' ).tooltip();
$(this).parent().find( '.volSlider' ).slider({ max: 100, min: 0});

しかし、今では誰のためにも機能していません..

HTMLは次のとおりです。

    <img id="infoImg" src="images/info_s.png" height="30" width="30" title="What">
<div id="volSlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 18%;"></a></div>

このコードは、テーブルのすべての行で繰り返されます..

jQueryの .each() 関数でも試してみましたが、成功しませんでした:

 $('.volSlider').each(function(index, elem) {
                $(this).slider({ max: 100, min: 0});
            });

追加の情報やコードが必要な場合は、喜んで投稿します。

4

3 に答える 3

0

それを変更します：

//Initial setup for jQuery UI

$( '#infoImg' ).tooltip();
$( '#volSlider' ).slider({ max: 100, min: 0});

これに：

$( '.infoImg' ).tooltip();
$( '.volSlider' ).slider({ max: 100, min: 0});
于 2013-10-30T10:24:15.510 に答える
0

コードの最初の部分: 初期設定で、 id によってハンドラーを選択します$('#infoImt')。更新後、クラスセレクターを使用します$('.infoImg')。同じオブジェクトを参照していません。それがうまくいかない理由です。

注意点: 更新された要素を追加する前に、既存の要素が最初にその機能を削除していることを確認してください。

編集

次の機能を試してください。

var initFn = function(){
    $('.infoImg.__new')
    .tooltip()
    .removeClass('__new');

    $('.volSlider.__new')
    .slider({max:100,min:0})
    .removeClass('__new');
};

ご覧のとおり、クラスを追加しました: __new. このクラスは「実際の」セレクターです。これにより、同じ要素に 2 回.tooltip()適用することがなくなります。.slider()HTML も少し変更する必要があります。

<img class="infoImg __new" src="images/info_s.png" height="30" width="30" title="What" />
<div class="volSlider __new ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">
    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 18%;"></a>
</div>

idに変更し、クラスclassを追加したことに注意してください。__newこれがうまくいくかどうか教えてください。

于 2013-10-30T09:40:29.673 に答える