When changing DOM, .on doesn't work as expected

Question

Here's the site I'm working on: http://cirkut.net/sub/northwood/popunder/

Essentially what I'm trying to do is after you hover over the dropdown, you can click on the four links on the side, and it changes the content based on what you selected. My filtering works on initial load, but after clicking on, lets say Locations, nothing propagates into the middle and right content column.

Here's the code on keyup so far:

$('.megaMenu .menuSearchBar').on("keyup",function(event){
            //NONE OF THIS FIRES AFTER SELECTING a MENU ITEM
            var activeitem = $('.leftmenu a.active').text();
            activeitem = activeitem.toLowerCase();
            activeitem = activeitem.split(' ').join('-');

            data = null;
            //Switch to determine which data to use during filtering
            switch(activeitem){
                case 'programs':
                    data = programs;
                    break;
                case 'locations':
                    data = locations;
                    break;
                case 'financial-aid':
                    data = financialaid;
                    break;
                case 'admissions':
                    data = admissions;
                    break;
            }
            var typedtext = $(this).val();
            var matching = new Array();
            for(index in data){
                for(i in data[index]){
                    if(data[index][i].toLowerCase().indexOf(typedtext.toLowerCase()) != -1){
                        matching.push(data[index][0]);
                        break;
                    }
                }
            }
            //Filtering code goes here, just know that it outputs
            //into the middle and right columns
});
$('.megaMenu .menuSearchBar').keyup(); //Propagate initial content in middle and left column

In order to switch the items, I have a hidden <div> that holds the four search column (left content), which all changes when a menu item is clicked on. Here's the code for when a menu item is clicked:

$('.leftmenu a').click(function(){
    var oldactive = active;
    $('.leftmenu a').removeClass('active');
    $(this).addClass('active');
    //Get the new active item and set it so it can be compared in the switch above
    var active = $('.leftmenu').find('.active').text();
    active = active.toLowerCase();
    active = active.split(' ').join('-');
    //Change the left content to the search bar correlating to item clicked 
    $('.superNav .left').html($('.hidden .'+active).html());
    //Clear out the middle and right content for new data
    $('.middle').html('');
    $('.right').html('');
    //Supposed to trigger the above .on() call to set the new content, but doesn't.
    $('.megaMenu .menuSearchBar').keyup();
});

Without clicking on any side menu item, the on keyup function works perfectly.

My problem must lie within the left click, because the keyup function isn't firing properly anymore.

Any ideas?

Answer 1

This

$('.megaMenu .menuSearchBar').on("keyup",function(event){ 

Should be

$('body').on("keyup",'.megaMenu .menuSearchBar',function(event){

You are able to replace body with any parent element of the selected element.

Answer 2

If you are using .on to work on manipulated Com then you are using .on wrong way

$('body').on("keyup",.megaMenu .menuSearchBar,function(event){//first line should be like this

The correct Syntax is

$("parent element").on(event,children element,function)

It will bind the event to parent element but is triggered only when event occur on children element