Q:

jquery .on() delegate event handling not working for elements loaded via partial views

I have gradually migrated my app from straight MVC4 to using a lot more ajax and dynamically loaded partial views. I like it, but in the process my javascript and event management have gotten a bit unweildy so I'm trying to get it more organized and maintainable. One of the things I keep tripping up on is loading events for elements that don't exist in the dom yet. 
Using delegated events as described in this thread:
how-should-javascript-in-an-ajax-loaded-partial-view-be-handled
looks like it would help me out a lot, but I can't get it to work. 
I have the following on main page load (not a partial view). In this example #maincontainer exists on page load and throughout the execution of the application. ".panetitle" is loaded later via a partial view. When it is visible, $("#maincontainer .panetitle") in devtools locates it fine. There's no other event handling involving #maincontainer
$(document).ready(function () {
    $('#maincontainer').on('click', '.panetitle', function () {
        console.log('clicked');           
    });
});

My understanding of this form of .on() is that #maincontainer needs to exist when the page is loaded, but the event should be in effect for '.panetitle' descendants of #maincontainer whenever they appear in the future. 
1) Is my understanding correct?
2) Am I using it correctly? 
3) Any suggestions? :) 
As always, thanks. 
Joel  

A:

From what you've described, it appears that you are using it correctly.  Here are some things to check:

#maincontainer must exist at the time you install the event handler.
#maincontainer must be a parent of .panetitle.
#maincontainer must not be destroyed and recreated unless you reinstall the event handler.
.panetitle and its parents must be allowing event propagation so no intervening event handlers can be stopping event propagation up to #maincontainer.
.panetitle itself must be receiving the click event so it can propagate it (the click isn't blocked or taken by any other object).
The .panetitle object must have that class name at the time of the click.

You can check to see if 1, 2 or 3 are an issue by trying this as a debug step (not generally recommended to put all delegated events on the document as they should be located as close to the dynamic object as possible for better performance in large applications):
$(document).ready(function () {
    $(document).on('click', '.panetitle', function () {
        console.log('clicked');           
    });
});

If that isn't working either, then it's probably 4, 5 or 6 or something else we haven't yet dreamed up.  You can try this as a debug step:
$(document).ready(function () {
    $(document).on('click', function (e) {
        var t = e.target;
        console.log('click: tag = ' + t.tagName + ", class = " + t.className);           
    });
});

With this debug handler installed, click on the .panetitle object and see what you see in the debug console at that exact moment.  Are you getting any click event?   Is it for a different object?  If even then you're getting no click event, then something must be blocking propagation.  If you're getting the event, but for a different object, then something must be on top of .panetitle.

