javascript - Dijit 对话框按钮事件未执行

Question

我有一个 Dijit Dialog (jsfiddle) 以编程方式创建。当调用对话框显示时，我会在运行时传递按钮的 id。我正在尝试创建单击事件函数，以在运行时为传递的 id 执行。

但是事件并未执行。我想知道如何将功能附加到对话框按钮。

HTML

<button id="show">Show Dialog</button> 

JS

require([
    "dijit/form/CheckBox",
    "dijit/dijit",
    "dijit/form/Textarea",
    "dijit/form/FilteringSelect",
    "dijit/form/TextBox",
    "dijit/form/ValidationTextBox",
    "dijit/form/DateTextBox",
    "dijit/form/TimeTextBox",
    "dijit/form/Button",
    "dijit/form/RadioButton",
    "dijit/form/Form",
    "dijit/_DialogMixin"]);
require([
    "dojo/parser",
    "dojo/_base/declare",
    "dojo/domReady!",
    "dojo/ready"],

function (parser, declare, ready, Dialog) {
    parser.parse();

    dojo.ready(function () {
        function showDialog(yesBtnId, noBtnId) {
            var dialog = new dijit.Dialog({
                title: 'Confirmation',
                content: '<table style= "width: 300px;">' +
                    '<tr>' +
                    '<th style="text-align:center; padding: 5px" colspan="2"><label>Are You Sure ?</label></th>' +
                    '</tr>' +
                    '<tr>' +
                    '<td style="text-align:center; padding: 5px"><button id=' + yesBtnId + '>Yes</button></td>' +
                    '<td style="text-align:center;padding: 5px"><button id= ' + noBtnId + '>No</button></td>' +
                    '</tr>' +
                    '</table>'
            });

            dialog.show();
        }

        var myShowBtn = {
            id: "show",
            onClick: function (evt) {

                showDialog('yesDelete', 'noDelete');
            }
        };
        dojo.query("#show").connect("onclick", myShowBtn.onClick);

        var myYesDelete = {
            id: "yesDelete",
            onClick: function (evt) {

                alert('hello its working....');

            }
        };

        dojo.query("#yesDelete").connect("onclick", myYesDelete.onClick);

    });
});

Answer 1

您尝试为调用时尚不存在的元素添加事件处理程序，因此事件处理程序实际上未绑定(bind)，因为此时没有任何内容可以将其绑定(bind)到。

但是，如果移动该行:

dojo.query("#yesDelete").connect("onclick", myYesDelete.onClick);

直到 showDialog() 函数(将其放在 dialog.show() 后面)，然后它将像您在更新的 JSFiddle 中看到的那样工作。 .