觀察來自幾個jQuery UI對話框的事件

我需要觀察幾個jQuery UI對話框中的事件。他們都來標準a few events，你可以聽。到目前爲止沒有問題。觀察來自幾個jQuery UI對話框的事件

我可以用這一個功能綁定到開放事件：

$(document).bind('dialogopen', function() {});

不過，我需要區分哪個對話框事件起源。例如：

$('#dialog1').dialog(); 
$('#dialog2').dialog();

打開其中任何一個都會觸發相同的事件。綁定到文檔的功能在打開時會觸發兩個對話框。這不是我所希望的。我發現了兩種可能的解決方案，但都不是很好，但至少可以完成這項工作。

解決方案1：觸發回調函數的自定義事件開事件

// Trigger events 
$('#dialog1').dialog({open: function() { 
     $(this).trigger('dialog1open') 
    } 
}); 
$('#dialog2').dialog({open: function() { 
     $(this).trigger('dialog2open') 
    } 
}); 

// Observe events 
$(document).bind('dialog1open', function() { 
    //actions specifik to dialog 1 open event 
}); 
$(document).bind('dialog2open', function() { 
    //actions specifik to dialog 2 open event 
});

這樣要求我開始他們的時候，只需編寫自定義函數的所有事件，在所有對話使用特定於每個對話框的事件名稱轉發它。

解決方案2： 捕獲事件參數中的目標。這將是這個樣子：

$(document).bind('dialogopen', function(event) { 
    el = event.target; // get the element triggering the event 
    switch(el.id) { // Action depending on the triggers id 
     case dialog1: 
      //do something 
      break; 
     case dialog2: 
      //do something else 
      break 
    } 
});

這種方式，另一方面要求我有開關的情況下的負載對每個事件我感興趣的捕捉。

會寫一個包裝插件是一個好主意嗎？一個插件，迫使你給每個對話框一個id。然後它會以id作爲前綴或後綴來重新觸發每個事件。例如，打開#dialog1會觸發自定義事件dialog1open。

思路或具體的解決方案將在這裏感謝

編輯：我沒有提到一個重要的事情是，我有觀察家認爲主題（像#dialog1和#dialog2）不知道的。這必須考慮在內。

來源

2012-10-10 Anders

MalSu帶我走向正確的方向.delegate。升級的jQuery UI和jQuery到最新版本，我能夠使用.on

這裏是我的測試例子

從body

<div id="dialog1">Dialog number one</div> 
<div id="dialog2">Dialog number two</div> 
<button id="d1Opener">Open Dialog One</button> 
<button id="d2Opener">Open Dialog Two</button>

從<script>

$(document).ready(function() { 
    $('#dialog1, #dialog2').dialog({ 
     modal: true, 
     autoOpen: false 
    }); 
    $('#d1Opener').click(function() { 
     $('#dialog1').dialog('open'); 
    }); 
    $('#d2Opener').click(function() { 
     $('#dialog2').dialog('open'); 
    }); 
    $(document).on('dialogopen', function() { 
     console.log('A dialog was opened'); 
    }); 
    $(document).on('dialogopen', '#dialog1', function() { 
     console.log('Dialog1 was opened'); 
    }); 
    $(document).on('dialogopen', '#dialog2', function() { 
     console.log('Dialog2 was opened'); 
    }); 
});

來源

2012-10-10 20:02:34 Anders

我可能是錯的，但它似乎是你在這裏解決問題。

如果要綁定到單個對話框的打開事件，您將使用解決方案1沿着正確的路徑走，但是您不想觸發該事件，因爲一旦您在該功能中，該事件已經存在被觸發...

// Trigger events 
$('#dialog1').dialog({open: function() { 
     // Don't do this. 
     // $(this).trigger('dialog1open') 

     // Just do what you want to do in response to this particular dialog opening. 
    } 
}); 
$('#dialog2').dialog({open: function() { 
     // Again, don't do this. 
     // $(this).trigger('dialog2open') 

     // Just do what you want to do in response to this particular dialog opening. 
    } 
});

現在，如果你想獲得一些代碼重用（AKA，也許反應幾乎是相同的），你可以寫一個單獨的函數，並傳遞參數定製響應。所以......是這樣的：

$('#dialog1').dialog({ 
    open: openAlert("dialog1"); 
}); 
$('#dialog2').dialog({ 
    open: openAlert("dialog2"); 
}); 

function openAlert(dialogName) { 
    alert(dialogName + " just opened up!"); 
}

這樣，你得到一些重用，但要避免所有的case語句，等等（當然，你可以讓這對您的具體用途更加複雜。）

來源

2012-10-10 15:51:05 JasCav

我可能忘記提及一件重要的事情問題。我使用觀察者＃dialog1和＃dialog2不一定知道。 $（文檔）將操作和事件委託給觀察者，如下所述：http://stackoverflow.com/questions/12590091/jquery-observer-pattern我將嘗試在問題中反映這一點 – Anders

我會將所有的對話封裝在一個div中，並附上一個監聽器。

$("#dialog_wrapper").delegate(".dialog", "dialogopen", function(e){ 
    var open_dialog_id = $(this).attr("id"); //get id of child dialog 

    /* do whatever */ 
});

但是我同意JasCav，你可能會反思它。

來源

2012-10-10 15:57:51 MalSu

觀察來自幾個jQuery UI對話框的事件

回答

相關問題