Clicking on element from jQuery dialog generated by function

Question

I am having a rather strange issue with jQuery/Javascript. (This happens in IE, FF and Chrome)

I have a (asp.net) webpage as follows:

Header with lots of buttons (generated at PreRender)

Hidden div with buttons doing postbacks (generated OnLoad) & a div to use as a dialog

---

Page with an iFrame

Lets say I have a Button with '1234_stuff' as its CLIENTID in the Hidden div. I have a button in the Header that has a OnClientClick = "$('#1234_stuff').click();return false;";

When I click the button that is in the header this works perfectly. Good.

I have an other button in the header (lets call it PopupStarter) that has a OnClientClick = "Popup('Titel', 'Description', '1234_stuff');return false;";

The javascript Popup function is as follows:

function Popup(title, description, buttonid) {
    $('#dialog-popupText').html('<p><b>' + title + '</b></p><p>' + description + '</p>');
    var buttonsToShow;
    if (buttonid!= null) {
        buttonsToShow = {
            'ClickMe': function () {
                $('#' + buttonid).click();
                $(this).dialog('close');
            },
            'Cancel': function () {
                $(this).dialog('close');
            }
        }
    } else {
        buttonsToShow = {
            'Cancel': function () {
                $(this).dialog('close');
            }
        }
    }
    $('#dialog-popup').dialog(
    {
        resizeable: false,
        width: 'auto',
        modal: true,
        draggable: false,
        buttons: buttonsToShow
    });
}

When I click the 'PopupStarter' button the jQuery dialog shows as expected, no trouble there. However... when I click the ClickMe button nothing happens (besides closing the dialog).

I would think I did something wrong: so I tried it with a timer:

function Popup(title, description, buttonid) {
    $('#dialog-popupText').html('<p><b>' + title + '</b></p><p>' + description + '</p>');
    var buttonsToShow;
    if (buttonid!= null) {
        buttonsToShow = {
            'ClickMe': function () {
                setTimeout(""$('#"" + buttonid + ""').click();"", 100);
                $(this).dialog('close');
            },
            'Cancel': function () {
                $(this).dialog('close');
            }
        }
    } else {
        buttonsToShow = {
            'Cancel': function () {
                $(this).dialog('close');
            }
        }
    }
    $('#dialog-popup').dialog(
    {
        resizeable: false,
        width: 'auto',
        modal: true,
        draggable: false,
        buttons: buttonsToShow
    });
}

This works!! Now that is odd. So I called the parent jQuery

parent.$('#' + buttonid).click();

This also does not work.

And to top it all off, when I enter each of the lines manually in the console of the browser they all work!

Answer 1

Try using this:

$(document).on('click', '#' + buttonid, function(){
    Your functions here;
});

Any items that do not exist on page load, will need to have the event listeners applied to the document, the body, or any parent selector that existed in the DOM on page load. Javascript does not attach listeners to objects that are not present when the DOM is loaded. Hope this helps!