Связать событие click с динамически созданным диалоговым окном в jQuery

Пример оригинальной скрипки

Ошибка для динамически созданного диалога.

Я получил этот скрипт для загрузки содержимого AJAX в диалоговое окно jQuery UI, class которого назван .open_dia в примерах .open_dia . Проблема в том, что у меня есть .open_dia динамически загружаемый в страницу в (window).bind(“load”, function(){} event , поэтому я хочу знать, как изменить эту строку из

 var $link = $(this).one('click', function(){.... 

к чему-то

 var $link = $('.area').one('click','.open_dia', function() { 

так что я могу связать событие с динамически созданным элементом .open_dia чтобы открыть диалог. Любая помощь будет оценена по достоинству.

Вот исходный код:

 $(document).ready(function() { var $loading = $('loading'); $('.open_dia').each(function() { var $dialog = $('
') .append($loading.clone()); var $link = $(this).one('click', function() { $dialog .load($link.attr('href') + ' #content') .dialog({ title: $link.attr('title'), width: 500, height: 300 }); $link.click(function() { $dialog.dialog('open'); return false; }); return false; }); }); });

Код ошибки:

 $(document).ready(function(){ $('button').one('click',function(){ $(this).next('.area').append('Click'); }); var $loading = $('loading'); $('.open_dia').each(function() { var $dialog = $('
') .append($loading.clone()); var $link = $('.area').one('click','.open_dia', function() { $dialog .load($link.attr('href') + ' #content') .dialog({ title: $link.attr('title'), width: 500, height: 300 }); $link.click(function() { $dialog.dialog('open'); return false; }); return false; }); }); });

Пример HTML:

  

Привет, я расколол ваше решение и внес изменения в javasript следующим образом:

 var loading = $('loading'); $(document).ready(function () { $('button').click(function () { $(this).next('.area').append('Click'); }); $(document).on('click', '.open_dia', function (evt) { var dialog = $('
').append(loading.clone()); dialog.load($(this).attr('href') + ' #content').dialog({ title : $(this).attr('title'), width : 500, height : 300 }); dialog.dialog('open'); return false; }); });

Моя измененная скрипка JS находится здесь: http://jsfiddle.net/91nc1k1t/2/

Если вы хотите загружать содержимое каждого диалогового windows только один раз, см. Это обновление разветвленной скрипки: http://jsfiddle.net/91nc1k1t/5/

Вы можете использовать это:

  

Нет проблем, если динамически генерируется целевой element DOM. Чтобы он работал, убедитесь, что обработчик событий зарегистрирован в событии клика элемента-контейнера (родительский элемент динамически созданного элемента). Это решит проблему!