0

編集: http://jsfiddle.net/J26Dw/ ([追加] をクリック)

data-widget="bootstrap-switch"属性でマークされたすべてのチェックボックスに対して、bootstrapSwitch()プラグインを呼び出したいと思います。これは、次の単純な関数でうまく機能します。

$(function () {
    var activator = 'data-widget="bootstrap-switch"';

    $('input[type="checkbox"][' + activator + ']')
        .each(function () {
            $(this).bootstrapSwitch();
        });
});

チェックボックスがオンザフライで DOM に作成/追加された、つまりボタンをクリックした場合はどうなるでしょうか?

イベントをキャッチしてから、追加された要素をDOMNodeInserted呼び出そうとしましたが、 . 次のコンソール エラーが表示されます (多数のチェックボックスと共に :P):bootstrapSwitch().data('bootstrap-switch')undefined

Uncaught RangeError: 最大呼び出しスタック サイズを超えました。

誰かが私を正しい方向に向けることができますか?

$('body').on('DOMNodeInserted', '[' + activator + ']', function(e) {
    var el = $(e.target);

    console.log(el.attr('data-widget')); // Returns "bootstrap-switch", OK

    if (!el.data('bootstrap-switch')) {
        el.bootstrapSwitch(); // Infinite recursion
    }
});
4

1 に答える 1

1

bootstrapSwitch再帰ループを引き起こしている必要があります。明らかにチェックボックスを再構築します。DomNodeInsertedその際、ターゲット要素を削除してドキュメントに再度追加するなど、コールバックを再トリガーするために何かを行う必要があります。

いずれにせよ、これはあなたがやろうとしていることを達成すると思います:

$(function () {
    var options   = {},
        selector  = 'input[type="checkbox"][data-widget="bootstrap-switch"]',
        activator = function () { $(this).bootstrapSwitch(options); };

    $(selector).each(activator);

    $('#btn-add').click(function () {
        var $newInput = $('<input>', {
           "type": 'checkbox',
           "data-widget": 'bootstrap-switch'
        });
        $('.holder').append($newInput);
        activator.apply($newInput);
    });

    $('#btn-copy').click(function () {
        var $clonedInput = $('#switch').clone();
        $('.holder').append($clonedInput);
        activator.apply($clonedInput);
    });
});

ここでフィドル: http://jsfiddle.net/klenwell/LAUx9/

于 2014-07-26T05:27:53.180 に答える