Question

我试图通过制作对话框来保存一些代码，这样我就可以将内容传递给代码，代码将处理其余的代码。我正在构建一些我需要很多对话框的东西，所以认为这是一种合乎逻辑的方法。我遇到的问题是当你在对话框中按下按钮时，我需要触发回调函数。我认为自从点击事件以来，我已经离开某个地方，因此回调根本不会发生。

https://jsfiddle.net/qcvjndh6/

代码：

function Utils() {

}

Utils.prototype = {
    constructor: Utils,
    showDialog: function (title, html, okCallback) {
        var modal = $('<div />', { 'class': 'modal fade', 'role': 'dialog', id: 'mymodal' });
        var modalDlg = $('<div />', { 'class': 'modal-dialog' });
        var modalContent = $('<div />', { 'class': 'modal-content' });

        modalContent.append($('<div />', { 'class': 'modal-header', 'text': title })
                        .append($('<button />', { 'type': 'button', 'class': 'close', 'data-dismiss': 'modal', 'aria-label': 'Close' })
                            .append($('<span />', { 'aria-hidden': 'true' }).html('&times;'))));
        modalContent.append($('<div />', { 'class': 'modal-body' })
                        .append(html));
        modalContent.append($('<div />', { 'class': 'modal-footer' })
                        .append($('<button />', { 'class': 'btn btn-primary', 'data-dismiss': 'modal', 'type': 'button', 'text': 'OK', id: 'btnOKCLOSE' })));
        modal.append(modalDlg)
        modalDlg.append(modalContent);

        //$('#btnOKCLOSE').click(function () { alert('test'); }.bind(this)); Doesn't Work
                //$('#btnOKCLOSE').click(function () { alert('test'); }); Doesn't Work
        $('#btnOKCLOSE').click(okCallback.bind(this)); //doesn't work.


        $(modal).modal('show');
    }

}

var Utils = new Utils();

Utils.showDialog("Title", $('<p/>', {'text': 'test'}), function (e) { alert('test');});

Answer 1

不确定根本原因是什么，但当我将回调绑定到实际元素时，它起作用了：

  okCallback = typeof okCallback != 'undefined' ? okCallback : function () { };
    var modal = $('<div />', { 'class': 'modal fade', 'role': 'dialog', id: 'mymodal' });
    var modalDlg = $('<div />', { 'class': 'modal-dialog' });
    var modalContent = $('<div />', { 'class': 'modal-content' });

    modalContent.append($('<div />', { 'class': 'modal-header', 'text': title })
                    .append($('<button />', { 'type': 'button', 'class': 'close', 'data-dismiss': 'modal', 'aria-label': 'Close' })
                        .append($('<span />', { 'aria-hidden': 'true' }).html('&times;'))));
    modalContent.append($('<div />', { 'class': 'modal-body' })
                    .append(html));
    modalContent.append($('<div />', { 'class': 'modal-footer' })
                    .append($('<button />', { 'class': 'btn btn-primary', 'data-dismiss': 'modal', 'type': 'button', 'text': 'OK', id: 'btnOKCLOSE' }).click(okCallback.bind(this))));
    modal.append(modalDlg)
    modalDlg.append(modalContent);

    $(modal).modal('show');

    $(modal).on('hidden.bs.modal', function () {
        $(modal).off('click');
        $(modal).remove();
    });

OKCallback / click事件未在引导程序对话框中触发

1 个答案: