диалоговое окно jquery: получить идентификатор диалогового окна в диалоговом окне

Question

У меня есть программное обеспечение, которое позволяет пользователям открывать несколько диалоговых окон. Не вдаваясь в очень длинное объяснение того, что я делаю, можно ли вытащить идентификатор диалогового окна из диалогового окна? Так, например, у меня может быть диалоговое окно с именем «dialog1», а другое - «dialog5», если я нажму ссылку в HTML либо в этих диалоговых окнах (не нажимая на кнопки диалогового окна), мне нужно знать, если его 'dialog1' или 'dialog5'.

В настоящее время я вижу два варианта: 1 # Откройте диалоговое окно с переменной GET, которая содержит идентификатор диалогового окна, а затем PHP выдает его идентификатор в местах, где мне нужно (и повторно отправляйте эту информацию в любых формах ajax, тогда эта страница возвращает данные, если диалог обновляется и т. д. и т. д.) ....

2 # У каждой страницы есть элемент HTML dom с определенным идентификатором, а затем JavaScript при загрузке найдите этот элемент, замените его на случайно созданный элемент (таким образом, не будет конфликтов с новыми диалоговыми окнами), затем используйте случайно созданный элемент для перемещения DOM для динамического вытягивания идентификатора ...

I попробовал b oth методы, и кажется, что метод 2 лучше, так как он требует гораздо меньшего обслуживания, но его уродливое решение (и будет ломаться при изменении DOM). Любой лучший способ добиться этого?

Answer 1

Связать делегированное событие click с внешней оболочкой, в которой существуют все идентификаторы диалога. Использовать общий класс для всех диалогов («common-class»).

<div class="outer-wrapper"> 
<div id="dialog-1" class="common-class" title="Basic dialog"> 
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
</div> 
<div id="dialog-2" class="common-class" title="Basic dialog"> 
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
</div> 
</div> 

jQuery(".outer-wrapper").on("click",".common-class",function(){ 
    var dialogclick = jQuery(this).attr("id"); 
})