当尝试对添加在DOM上的元素调用插件时，jQuery无限递归

Question

编辑：http://jsfiddle.net/J26Dw/ (单击Add)

对于每个标记有属性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')是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
    }
});

Answer 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/