特林呼籲對DOM

Question

編輯元素添加一個插件，當jQuery的無限遞歸。這工作正常，這個簡單的功能：

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

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

如果什麼複選框創建/加入的飛行到DOM，即點擊一個按鈕？

我試圖抓住DOMNodeInserted事件，然後調用bootstrapSwitch()添加的元素，只有當.data('bootstrap-switch')是undefined。我得到以下控制檯錯誤（有大量的複選框一起：P）：

Uncaught RangeError: Maximum call stack size exceeded.

任何人都可以點我朝着正確的方向？

$('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/