jQuery - apply handlers to elements loaded after page load by a plugin

Question

First off I have read the pertinent posts here on Stackoverflow but I am still stuck.

I have a page that loads data using a custom grid plugin. That data needs to have a link in it that will launch a modal window (using the jqModal plugin). The window is present in the html, not retrieved by some ajax call. So if I attach the event handler to a link that is present in the page html it works fine. If I apply it to a link that is created by this grid plugin it does not work.

The following will work on links already present in the html but not on links generated by the plugin:

$(function() {     
var Foo = $('#Foo');
Foo.jqm({trigger: 'a.bar'});
});

I think I understand why this is however I cannot solve the problem. live doesn't cut it as the event that should attach this is load, not click or some other event that is permitted by jQuery 1.3.2 (cannot use version 1.4). I figured bind might be the answer but I cannot get it to work and I'm pretty sure it's just me not "getting it".

Any suggestions appreciated as I have already pounded my head on this for too long.

Oh, an example of something I did figure out how to do with dynamically loaded data:

$('body').click(function(event) {
           if ($(event.target).is('a.bar')) {
               $(event.target).toggleClass('baz');
            }
});

This will successfully add the class "baz" to the dynamically loaded link "a.someLink" on a click (I thought I could add the trigger class to the links in this way but cannot figure out how to do it on load as opposed to on click) but the link will not trigger the modal window and I'm not sure why.

EDIT: I'm adding a callback in the custom grid plugin but for the time being I used the following to get things working:

$( '.someclass' ).animate( {opacity: 1}, 2000, function(){
            Foo.jqm({trigger: 'a.bar'});
});

Hackish but it does the trick in a pinch.

Answer 1

You need some kind of callback that runs when the dynamic content is loaded.

if jqm is jQueryModal, I believe there is an onLoad callback:

$('#dialog').jqm({
    onLoad:function() {
        // content is loaded?
        console.log(!!$('.bar').length); // true if .bar exists
    }
}); 

Answer 2

you could create a function, then call it during the ajax call after you load stuff.

function setEvent()
{
var Foo = $('#Foo'); 
Foo.jqm({trigger: 'a.bar'}); 
};

and in the ajax

success: function(msg)
            {
                Loadstuff(msg);
              setEvent();
            },