21 April 2010

jQuery Event Handling - Mixing Inline Events With jQuery events

I have been working with jQuery for the last couple of days attempting to get some dialog closing messages working within our application. One of the dialogs I was trying to work with had an embedded iframe which was loaded from an ASP.Net menu control. The menu control items fired an onclick event to load the iframe.

I created an event handler to attach to the menu items so that when clicked it checked for unsaved changes. If there where changes then display a confirm message box about leaving the page. It worked to a degree but the iframe was still loaded even if the bound jQuery event returned false.

I found the issue to be that mixing inline onclick events and jQuery events is not possible (or recommended), especially if one or more events can be cancelled.

So the solution was simple. I removed the inline onclick event and bound it with jQuery. As the url the iframe needed to load was dynamically created server side I even managed to get a HTML 5 new feature, custom non-visible data, in as well

No comments: