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

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

我试图打开和创建活动（我在我的代码开始绑定）：

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>');

来源

2014-11-05 TheRealPapa

您是否在绑定事件之前等待DOM准备就绪？ – PeterKA 2014-11-05 17:53:18

嗨@PeterKA，是的，我添加了一个'alert（“HERE！”）;'linecreate'/open'绑定，并且在屏幕显示对话框之前触发OK。我试图在对话框打开后执行代码（基本上是自定义复选框），但是它们在打开时似乎都会触发，因此具有“checkboxes”的HTML尚未添加到DOM中，因此checkBoxes代码不起作用。 – TheRealPapa 2014-11-05 17:57:35

你能创建一个jsfiddle演示来演示这个问题吗？ – PeterKA 2014-11-05 18:00:12

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; 
     } 
    } 
    });

来源

2014-11-05 21:07:24 lloiser

谢谢@lloiser。我想我需要一个JSFiddle来帮助你！我会接下来做一个。你的建议在顺序上有意义，但现在它有一个奇怪的行为。在打开第一个和第二个对话框（不刷新页面）的情况下，它不起作用，但它在第三个对话框打开了？！疯狂！我会做一个JSFiddle来看看我在这个过程中学到了什么。 – TheRealPapa 2014-11-06 02:22:06

我有拼写错误!!!!您的解决方案完美运作谢谢！ – TheRealPapa 2014-11-09 23:56:52

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

而不是手工绑定的事件，初始化与回调的部件将是更安全的方法：

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

来源

2014-11-05 18:05:13

嗨@TJ它仍然无法正常工作。我自己也收到了警报（请参阅我对@PeterKA的评论）。看起来生成复选框的代码与由对话框创建的HTML不同步。我将创建一个小提琴并放置在这里。我现在需要睡觉，在悉尼上午5点...感谢您的帮助！ – TheRealPapa 2014-11-05 18:16:08

@TheRealPapa确定一旦你分享小提琴，我会尝试修改答案:) – 2014-11-05 18:17:45

事实上，我在'setupCheckBox（）'中放置了一个ALERT，它在对话框打开之前触发，所以没有HTML执行反对。我想我需要像'afterOpen'这样的监听器。 – TheRealPapa 2014-11-05 18:18:08

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

回答

相关问题