Take the 2-minute tour ×

I'm working on an application where I'm opening a modal dialog box. The dialog box allows the users to add checkboxes like criteria to the modal dialog div being displayed. They enter the text for the checkbox into a textbox on the page, and click a button to append the checkbox. The checkbox shows up just fine. Next to each checkbox, I'm also adding a jquery ui-icon icon-close image class so that when the X next to the new entry is clicked, the entry is removed from the page.

The problem lies in the fact that simply having the script specified in the page doesn't work. The div doesn't appear to be a part of the page and defining an onclick listener for all images doesn't do what it's supposed. So my question is, how can I define an image onclick listener within the modal dialog. For example, in defining the modal dialog box, I can specify an on open function that does something whenever the dialog box is first opened. I want to, in similar fashion, define a function that is actively listening for whenever an image has been clicked within the modal dialog box.


        $("<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-title").after("<i style='font-size: 12px; float: right;'>("+value+")</i>");
            $(".ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset").css("float", "none");

Similar to the open function being defined, I want to create a listener for image clicks

share|improve this question

1 Answer 1

To define a global handler which listens when a element is clicked, use the on function on jQuery 1.7 or above. For example:

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

If you are using a version of jQuery prior to 1.7, then use delegate instead of on like this:

$(document).ready(function() {
    $('.ui-dialog .icon-close').delegate('', 'click', function() {
        // had been clicked
share|improve this answer

Your Answer


