0

Webページのチェックボックスごとに、jsfiddle.net / gnQUe /170/から借りたスライダーに置き換えます。

これは、ドキュメントがロードされるときに要素を調べることによって行われます。

ここで問題となるのは、ajaxを介してより多くのコンテンツが読み込まれると、新しいチェックボックスが変換されないことです。

この問題を解決するために、AjaxCompleteイベントを使用してすべての要素を再度確認し、チェックボックスをスライダーに置き換えました。ここで、すでに置き換えられた要素が2つのスライダーを取得するという問題が発生します。チェックボックスが非表示で、次の要素がクラス「slider-frame」のdivであるかどうかを確認するために、要素の再処理を行わないでください。

しかし、私には他にもそのようなコントロールがたくさんあり、この問題を抱えているのは私だけではないと思います。それを回避する別の簡単な方法はありますか？

jQuery live / on（http://api.jquery.com/on/）イベントが存在しますが、引数としてイベントが必要ですか？一方、コントロールがレンダリングされたときの外観を変更したいと思います。

同じ問題の別の例は、jQuerysオートコンプリートプラグインを使用してajaxを介してロードされるいくつかのコントロールを拡張することです。

要素のいくつかの属性を変更する以外に、これを達成するためのより良い方法はありますか？

要約すると、ドキュメントのロード時にDOMのすべての要素を処理したいのですが、ajaxを介してさらに多くの要素がロードされる場合は、新しい要素のみを変更したいと思います。

4

1 に答える 1

1

要素がスライダーに変換されると、クラスが追加されると思います。したがって、not 句を追加するだけです。

$(".MySelector").not(".SomeClassThatSliderAddsToElement").slider({});

したがって、コードの場合、次のようにします

$('.slider-button').not(".sliderloaded").addClass("sliderloaded").toggle(function(){
    $(this).addClass('on').html('YES');
    $('#slider').val(true);
},function(){
    $(this).removeClass('on').html('NO');
    $('#slider').val(false);
});

他に何も付けたくないとおっしゃっていましたので、トグル機能をクリックに変更してはいかがでしょうか。

$(document).on("click", ".slider-button", function(){
   var elem = $(this);
   elem.toggleClass("on");
   var state = elem.hasClass("on");
   elem.text(state?"YES":"NO");
   elem.parent().next().val(state);    
});

フィドルの実行: http://jsfiddle.net/d9uFs/

于 2012-10-24T13:03:46.983 に答える