Twitter BootStrap 确认不适用于动态生成的元素

Question

我将 DataTable 与页面加载时生成的动态内容一起使用。 在 table 中我使用了 bootstrap 确认。 在脚本下面加载它。

$( document ).ajaxStop(function() {
    $(document).find('[data-toggle="confirmation"]').confirmation();
});

它打开确认框，但是当点击 "Yes" 或 "No" 时，它不起作用。

这不起作用

我有下面的代码来检测 'Confirmed' 事件。

$(document).ready(function(){
    $(document).find('.delete-record').on('confirmed.bs.confirmation', function() {
        var thisEl = $(this);
        deleteForm($(this).attr('data-delid'));
    });
});

这是有效的

$(document).ajaxStop(function(){
    $(document).find('.delete-record').on('confirmed.bs.confirmation', function() {
        var thisEl = $(this);
        deleteForm($(this).attr('data-delid'));
    });
});

document.ready 怎么了？

编辑：

我在其他页面上使用与 document.ready 相同的代码，但是没有 DataTable，它是 HTML DIV 结构。

Answer 1

尝试稍微更改您的事件绑定，以便使用备用 $.on 语法将其绑定到每个现有和未来的 .delete-record 元素。

$(document).ready(function(){
    $('body').on('confirmed.bs.confirmation', '.delete-record', function() {
        deleteForm($(this).attr('data-delid'));
    });
});

不知道你的页面结构我选择绑定到 body，但你可以将它绑定到你的 table.

的任何父元素

Answer 2

我认为这是因为文档准备就绪后 dom 操作动态生成的元素

用 .delegate 代替 .ready 怎么样？

$(document).delegate('.delete-record', 'confirmed.bs.confirmation', function() {
    deleteForm($(this).attr('data-delid'));
});

Answer 3

同样的问题...
花一点时间了解插件！
很简单:

my_new_dynamic_element.on('confirmed.bs.confirmation', function(){alert('ok')}).confirmation();

Answer 4

一个更简单的解决方案： 你有一个像

这样的初始化

$('[data-toggle="confirmation"][data-target="service"]').confirmation({});

把这个放在一个函数里 $(document).ready(function(){}); 并在加载动态内容后调用它

function confirm(){
    $('[data-toggle="confirmation"][data-target="service"]').confirmation({
        your options come here
    });
}
$(document).ready(function(){
    confirm();
});