模态警报，但确认按钮对脚本无反应

Question

当用户想要从那里的项目组合中删除项目时，我正在尝试发出动态模式弹出警报。

我的弹出窗口本身没有问题，并且可以从项目中获取ID以及模式视图，但...

模态视图中的按钮是从脚本生成的，如小提琴所示 ，当我单击模态中的“删除”按钮并希望它激活.js函数时，没有任何反应？

我想念的是什么，或者还有另一种方法可以做到这一点？

js：

$('.delete').click(function(){

    var pid = $(this).attr("data-id");
    var pname = $(this).attr("data-name");

    $(".delete-footer").html('<button type="button" class="btn btn-warning" data-dismiss="modal">Regret</button><a href="#" data-id="'+pid+'" class="btn btn-info do_delete">Delete</a>');
    $('#confirm-delete').modal('show');

});

$('.do_delete').click(function(){

    alert("I am here!");

    var pid = $(this).attr("data-id");
    $('#confirm-delete').modal('hide');

});

的HTML：

<a href="#" class="delete" data-id="23">Delete the project</a>

<div class="modal fade" id="confirm-delete" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title">Delete project?</h4>
            </div>

            <div class="modal-body delete-body">
                Are you sure you want to delete project?                
            </div>

            <div class="modal-footer delete-footer">

            </div>
        </div>
    </div>
</div>

链接到小提琴

任何帮助表示赞赏，并在此先感谢:-)

Answer 1

您需要这样绑定事件

$(document).on('click', '.do_delete', function(){

    alert("I am here!");

    var pid = $(this).attr("data-id");
    $('#confirm-delete').modal('hide');

});

原因

因为您是将元素动态添加到文档中。 绑定单击事件的方式可确保仅绑定到文档首次准备就绪时出现的那些元素。

动态添加的元素不会获得绑定。 我们需要使用JQuery的.on（）。

Answer 2

$（'。delete'）。click（function（）{

var pid = $(this).attr("data-id");
var pname = $(this).attr("data-name");

$(".delete-footer").html('<button type="button" class="btn btn-warning" data-dismiss="modal">Regret</button><a href="#" data-id="'+pid+'" class="btn btn-info do_delete">Delete</a>');
$('#confirm-delete').modal('show');


$('.do_delete').click(function(){

alert("I am here!");

var pid = $(this).attr("data-id");
$('#confirm-delete').modal('hide');

}）; }）;