创建对话框后的jQuery ui对话框触发事件答案

【问题标题】：jQuery ui dialog trigger event after dialog created创建对话框后的jQuery ui对话框触发事件
【发布时间】：2014-11-05 17:48:18
【问题描述】：

我试图在创建 jQuery ui 对话框后触发函数setupCheckBox('chk-img');，但我无法破解它。任何帮助表示赞赏！

我已经尝试过打开和创建事件（我在代码开头绑定）：

jQuery("#TicketTC").on( "dialogcreate", function( event, ui ) {
    setupCheckBox('chk-img');
});

和

jQuery("#TicketTC").on( "dialogopen", function( event, ui ) {
    setupCheckBox('chk-img');
});

我的对话代码是：

jQuery("#TicketTC").dialog({
    modal: true,
    width: 600,
    height: 'auto',
    autoOpen: true,
    buttons: {
        CONTINUE: function() {
            jQuery(this).dialog("close");
            return true;
        },
        CANCEL: function() {
            jQuery(this).dialog("close");
            return false;
        }
    }
}).html('<div class="support-msg">' + tempHTML + '</div>');

【问题讨论】：

在绑定事件之前是否等待 DOM 准备好？
嗨@PeterKA，是的，我在dialogcreate/open 绑定中添加了alert("HERE!"); 行，它在屏幕上显示对话框之前触发OK。我试图在对话框打开后执行代码（基本上是自定义复选框），但两者似乎都会在它打开时触发，因此带有checkboxes 的 HTML 尚未添加到 DOM 中，因此复选框代码不起作用。
你能创建一个 jsfiddle 演示来演示这个问题吗？

标签： javascript jquery jquery-ui dialog

【解决方案1】：

dialog(...) 立即打开对话框。因此，您之后使用 html 设置的 html 不在对话框中。并绑定到dialogopen 事件。

jQuery("#TicketTC")
  .on("dialogopen", function (event, ui) {
    setupCheckBox('chk-img');
  })
  .html('<div class="support-msg"></div>')
  .dialog({
    modal: true,
    width: 200,
    height: 'auto',
    autoOpen: true,
    buttons: {
      CONTINUE: function () {
        jQuery(this).dialog("close");
        return true;
      },
      CANCEL: function () {
        jQuery(this).dialog("close");
        return false;
      }
    }
  });

【讨论】：

谢谢@lloiser。我想我需要一个 JSFiddle 来帮助你帮助我！接下来我会做一个。您的建议在顺序方面是有道理的，但它现在有一个奇怪的行为。在第一个和第二个对话框打开时（没有页面刷新）它不起作用，但它在第三个对话框打开时起作用？！疯狂！我会做一个 JSFiddle 来看看我在这个过程中学到了什么。

【解决方案2】：

您应该在对话框初始化之前绑定事件处理程序，因为对话框默认设置为打开（如果您在之后绑定事件，它将不会被调用，因为这两个事件都已经发生了） .

与手动绑定事件相比，使用回调初始化小部件将是更安全的方法：

jQuery("#TicketTC").on("dialogcreate", function (event, ui) {
   setupCheckBox('chk-img');
});
jQuery("#TicketTC").on("dialogopen", function (event, ui) {
   setupCheckBox('chk-img');
});
jQuery("#TicketTC").dialog({
   modal: true,
   width: 200,
   height: 'auto',
   autoOpen: true,
   create: function (event, ui) { // this is more reliable
      setupCheckBox('chk-img');
   },
   buttons: {
    CONTINUE: function () {
        jQuery(this).dialog("close");
        return true;
    },
    CANCEL: function () {
        jQuery(this).dialog("close");
        return false;
    }
  }
}).html('<div class="support-msg"></div>');

JSFiddle

【讨论】：

嗨@TJ 它仍然无法正常工作。我自己也收到了警报（请参阅我对@PeterKA 的评论）。似乎生成复选框的代码与对话框创建的 HTML 不同步。我将在这里创建一个小提琴并放置。我现在需要睡觉，早上 5 点在悉尼...谢谢你的帮助！！
@TheRealPapa 好的，一旦你分享了小提琴，我会尝试修改答案:)
事实上，我在setupCheckBox() 中放置了一个ALERT，它在对话框打开之前触发，因此没有HTML 可供执行。我想我需要像afterOpen listener 这样的东西。