Jquery点击事件的问题答案

【问题标题】：Issue with Jquery click eventJquery点击事件的问题
【发布时间】：2014-03-07 07:10:17
【问题描述】：

我已经在 MVC 中实现了一个应用程序。我已经使用 jquery 创建了消息框。当我点击按钮时出现消息框。

<button   type="button" class="btn btn-primary" id="btnDispatch" >Dispatch</button>

我的 jquery 代码是

$(document).ready(function () {


        $('#btnDispatch').click(function () {

            $('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="btnClose"> × </button> <h5 id="dataConfirmLabel">Dispatch Alert</h5> </div><div class="modal-body"><h5>This order is dispatched.</h5><br/></div><div class="modal-footer"><button id="btnOk" type="submit" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" >OK</button> </div></div> <div class="modal-backdrop"></div>');


            $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));

            $('#dataConfirmModal').modal({ show: true }); 

            $('#btnClose').dialog('close');

            $('#btnOk').click(function () {

                var url = "http://localhost:65344/Dispatch";
                $(location).attr('href', url);

            });
        });


    });

点击ok按钮后，我想返回调度的索引页面。但是ok 按钮和x 按钮在这里不起作用。有什么解决办法吗？ ![在此处输入图片说明][1]

【问题讨论】：

标签： jquery asp.net-mvc button click entity-framework-4.1

【解决方案1】：

您需要在此处使用 event delegation，因为您的按钮已被动态添加到 DOM：

$('body').on('click', '#btnOk', function() {
    var url = "http://localhost:65344/Dispatch";
    $(location).attr('href', url);
});

此技术将帮助您将点击事件附加到这个新添加的按钮。

【讨论】：