Question

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

我对弹出窗口本身没有任何问题，并且从模式视图中解析项目中的ID，但是......

模态视图中的按钮是从脚本中生成的，如fiddle中所示，当我点击＆＃34;删除＆＃34;模态中的按钮，并希望它激活.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>

链接到fiddle

任何帮助都表示赞赏，并提前感谢： - ）

Answer 1

你需要以这种方式绑定事件

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

    alert("I am here!");

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

});

原因

因为您要将元素动态添加到文档中。并且您用于绑定click事件的方式确保仅绑定到文档首次准备就绪时存在的元素。

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

Answer 2

$（＆＃39; .delete＆＃39）。单击（函数（）{

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');

}）; }）;

模态警报，但确认按钮不对脚本作出反应

2 个答案: