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事件，然后调用bootstrapSwitch()添加的元素，前提是.data('bootstrap-switch')is undefined。我收到以下控制台错误（以及大量复选框：P）：

未捕获的 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 回答