为啥我的动态确认框只能使用一次？

Posted 2023-05-08

【中文标题】为啥我的动态确认框只能使用一次？

【英文标题】：Why does my dynamically confirm box only work once?为什么我的动态确认框只能使用一次？

【发布时间】：2018-07-10 23:13:30

【问题描述】：

我尝试创建一个自定义确认 UI 对话框，该对话框在第一次尝试时运行良好，然后在第二次尝试运行它时，我不再收到有关我的选择的警报，并且窗口也没有关闭。这是为什么？我在这里做错了什么，我可能忽略了？

这里是有问题的 html 和 javascript：

<input type="button" id="Button" value="Click Me" />

$('#Button').click(function () 
    confirmUI('is OK?', 'confirm', function () 
        alert('click OK');
    , function () 
        alert('click Cancel');
    );
);


var confirmUI = function (text, title, callbackOkClose, callbackCancelClose) 
    var $dialog = $('<div id="confirm_' + new Date().getTime().toString() + '"></div>');
    $dialog.html('<div>' + title + '</div><div>' + text + '<div style="width:100%;"><input type="button" id="confirmCancel" value="Cancel" style="float:right;" /><input type="button" id="confirmOk" value="OK" style="float:right;margin-right: 10px" /></div></div>');
    $('body').append($dialog);
    var buttonString = '';
    $dialog.jqxWindow(
        minWidth: 300,
        minHeight: 80,
        draggable: true,
        initContent: function () 
            $('#confirmOk').jqxButton(
                template: 'primary'
            );
            $('#confirmCancel').jqxButton(
                template: 'default'
            );
        ,
        resizable: false,
        closeButtonAction: 'close',
        isModal: true,
        okButton: $('#confirmOk'),
        cancelButton: $('#confirmCancel')
    );

    $dialog.on('close', function (e) 
        console.log('1');
        if (e.args.dialogResult.OK)  //ok
            if (callbackOkClose) 
                callbackOkClose();
            
         else  //cancel or close
            if (callbackCancelClose) 
                callbackCancelClose();
            
        
    );
    return $dialog;
;

这是一个 jsfiddle：http://jsfiddle.net/v0re8jeu/

【参考方案1】：

因为您为每个按钮单击创建该对话框，所以像 $('#confirmOk') 这样的东西不再是唯一的，并返回您第一次单击的按钮的选择器。您应该在关闭时将其从 dom 中删除，以便下一个工作：

$dialog.on('close', function (e) 
    console.log('1');
    $dialog.remove();