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?

score 1 · Answer 1 · answered Jun 11 '12 at 16:12

1

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

answered Jun 11 '12 at 16:12

This works perfectly, thanks! Can you explain why I have to do it on a parent item? Shouldn't my old code make more sense? – Josh Allen Jun 11 '12 at 16:17
By parent element i mean the element which is not changing because when you change the dom the click event is not bind with new Dom so you have to attach this event to some parent element which is not changing – Jun 11 '12 at 16:20

score 1 · Accepted Answer · answered Jun 11 '12 at 16:14

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.

answered Jun 11 '12 at 16:14

wirey00

33,517
7
54
65

You were a little late, but this absolutely works :) Thanks for the input! Just like @Somebody is in trouble's answer, can you explain why I have to use a parent element for it to work? – Josh Allen Jun 11 '12 at 16:18
This attaches an event handler the body, and the event bubbles up (from the `selected element` to the `body`) `.on()` allows an event handler on any `selected element`--even new ones--since the event is handled by the ever-present `body` element after it bubbles to there. @JoshAllen – wirey00 Jun 11 '12 at 16:27
I accepted your answer based on two things, you put the single quotes around the selector, and your explanation of why made more sense to me. Thanks to both of you though for your quick responses! – Josh Allen Jun 11 '12 at 16:40

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

2 Answers2