Question

I have an aspx page that contains a dialog box defined with JQueryUI

$('#dialog').dialog({
    modal: true,
    autoOpen: false,
    minWidth: 500,
    title: 'my dialog',
    buttons: { Finished: function() { $(this).dialog("close"); }
    }
});

Within the page I have a button which is supposed to open the dialog

<button class="button" id="dialogLoader">Open</button>

The JavaScript for opening the dialog is

$('#dialogLoader').live('click', function(event) {
    event.preventDefault();
    $('#dialog').dialog("open");
    loadDialogContent();
});

In Chrome Firefox etc all is good but IE9 does not load the dialog, even though when debugging all code appears to execute fine.

Any Ideas

UPDATE

Still have this problem I have updated the code above to show that I am now utilising preventDefault(); which I thought was the cause of the problem (if the problem is indeed event bubbling). but I still have no remedy to this if this was plain HTML it would work but I fear the involvement of ASP has caused some irregularity in rendering, which unfortunately returns no error.

UPDATE

Could the fact that this button is within JQueryUI tabs be causing the issue in IE9?

Answer 1

as you wrote your debug info is clean, this is just one idea. I hope this helps a little bit. attachEvent for Explorer.

var button = document.getElementById('dialogLoader');
if (button.addEventListener) {
    button.addEventListener('click', function() {
        //action
    }, true);
} else if (button.attachEvent) {
    button.attachEvent('click', function() {
        //action
    }, true);
}