對話框創建後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對話框觸發事件

回答

相關問題