特林呼吁对DOM

编辑元素添加一个插件，当jQuery的无限递归。这工作正常，这个简单的功能：特林呼吁对DOM

$(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 
    } 
});

来源

2014-07-25 gremo

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-26 05:27:53 klenwell

谢谢您的anwser，但'＃BTN-add'和' ＃btn-copy'只是一个例子：复选框可以通过其他方式添加到DOM中（即我无法控制它）。在这种情况下是否有解决方案？ – gremo

@gremo是的，通过应用这里演示的相同模式。如果有什么理由说明为什么这种模式不起作用，那么就必须阐明这一点，或许需要一个更加仔细的新问题。 – klenwell

特林呼吁对DOM

回答

相关问题