Указать изображение onclick listener в диалоговом окне JQuery Modal

Question

Я работаю над приложением, в котором я открываю модальное диалоговое окно. Диалоговое окно позволяет пользователям добавлять флажки, такие как критерии, к отображаемому модальному диалоговому диалогу. Они вводят текст для флажка в текстовое поле на странице и нажимают кнопку, чтобы добавить этот флажок. Флажок отображается просто отлично. Рядом с каждым флажком я также добавляю класс jquery ui-icon icon-close image, чтобы при щелчке X рядом с новой записью запись удалялась со страницы.

Проблема заключается в том, что просто наличие сценария, указанного на странице, не работает. Div не является частью страницы, и определение прослушивателя onclick для всех изображений не делает то, что предполагается. Поэтому мой вопрос заключается в том, как определить образ onclick-прослушивателя в модальном диалоговом окне. Например, при определении модального диалогового окна я могу указать открытую функцию, которая делает что-либо всякий раз, когда открывается диалоговое окно. Я хочу, таким же образом, определить функцию, которая активно прослушивается всякий раз, когда изображение было нажато в модальном диалоговом окне.

Пример:

 $("<div class='rationale' style='position: relative;'><div class='rationaleContainer' style='display:block; height:155px; overflow-y: scroll;'></div><div class='rationaleText' style='position: absolute; bottom: 0; float: right;'><input type='text' placeholder='Add rationale' id='rationaleBox' style='width: 540px;' maxlength='180'></div></div>").dialog({ 
     height: 300, 
     width: 600, 
     modal: true, 
     closeOnEscape: false, 
     resizable: false, 
     title: "Comments for " + item, 
     open: function(event, ui){ 
      $(".ui-dialog-titlebar-close").hide(); 
      $(".ui-dialog-title").after("<i style='font-size: 12px; float: right;'>("+value+")</i>"); 
      $(".ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset").css("float", "none"); 
     }, 

Подобно открытой определяемой функции, я хочу, чтобы создать приемник для изображения щелкает

Answer 1

Чтобы определить глобальный обработчик, который прослушивает при щелчке элемент, используйте on функции на jQuery 1.7 или выше. Например:

$(document).ready(function() { 
    $('.ui-dialog .icon-close').on('click', function() { 
     // an element of *.icon-close* within *.ui-dialog* 
     // had been clicked 
     $('ui-dialog').hide(); 
    }); 
}); 

Если вы используете версию JQuery до 1.7, а затем использовать delegate вместо on так:

$(document).ready(function() { 
    $('.ui-dialog .icon-close').delegate('', 'click', function() { 
     // an element of *.icon-close* within *.ui-dialog* 
     // had been clicked 
     $('ui-dialog').hide(); 
    }); 
});