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

Question

我正在使用DataTable来处理页面加载时生成的动态内容。 在表中我使用了bootstrap确认。 在脚本下面加载它。

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

它打开确认框，但是当点击“是”或“否”时，它不起作用。

这不起作用

我有以下代码来检测'确认'事件。

$(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，但您可以将其绑定到表的任何父元素。

Answer 2

我认为这是因为文件准备好后由dom操作动态生成的元素

如何使用.delegate代替.ready？

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

Answer 3

一个更简单的解决方案： 您有一个类似

的初始化

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

Answer 4

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

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