Question

我动态地将<div>附加到我的网页正文中。我的.html页面上不存在此<div> 在这个<div>中，我正在创建一个Jquery UI YES NO框。很简单，它会做一些事情＆＃39;当“是”时关闭该框，并在“否”时关闭该框我有一段工作代码来创建这个盒子。但是，经常需要两次点击YES按钮才能工作，这非常令人困惑。你会看到我用各种方法来关闭这个盒子。

                $(function () {
                    $('body').append('<div id="dialog-confirm"></div>').click(function (e) {
        e.preventDefault();
        $("#dialog-confirm").dialog("open");
    });

    $("#dialog-confirm").dialog({
        autoOpen: true,
        height: 200,
        width: 200,
        modal: true,
         title: 'Choose item?',
        buttons: 
        {
             'YES': function () {
                 $(this).dialog("close");
                //$("#dialog-confirm").dialog("close");
                //$('body').remove('#dialog-confirm');
                $('#dialog-confirm').remove();
            },
                'NO': function () {
                $(this).dialog("close");
                //$("#dialog-confirm").dialog("close");
                //$('body').remove('#dialog-confirm');
                $('#dialog-confirm').remove();
            }
        }

    });
});

Answer 1

问题是你添加div和附加点击处理程序之间存在竞争条件。有时它发生在之前，有时之后。这就是您获得不一致的点击行为的原因。请尝试以下方法：

$(function() {
    $('body').append('<div id="dialog-confirm"></div>');
    $("#dialog-confirm").dialog({
        autoOpen : true,
        height : 200,
        width : 200,
        modal : true,
        title : 'Choose item?',
        buttons : {
            'YES' : function() {
                $(this).dialog("close");
                // $("#dialog-confirm").dialog("close");
                // $('body').remove('#dialog-confirm');
                $('#dialog-confirm').remove();
            },
            'NO' : function() {
                $(this).dialog("close");
                // $("#dialog-confirm").dialog("close");
                // $('body').remove('#dialog-confirm');
                $('#dialog-confirm').remove();
            }
        }
    });
    $('#dialog-confirm').click(function(e) {
        e.preventDefault();
        $("#dialog-confirm").dialog("open");
    });
});

Jquery UI框 - 需要多次单击才能运行

1 个答案: