更改 DOM 时，.on 无法按预期工作

Question

这是我正在开发的网站：http://cirkut.net/sub/northwood/popunder/

基本上我要做的是在您将鼠标悬停在下拉列表上之后，您可以单击侧面的四个链接，它会根据您选择的内容更改内容。我的过滤在初始加载时起作用，但在点击后，比如说Locations，没有任何东西传播到中间和右侧的内容列。

到目前为止，这是关于 keyup 的代码：

$('.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

为了切换项目，我有一个隐藏的<div>，它包含四个搜索列（左侧内容），当单击菜单项时它们都会发生变化。这是单击菜单项时的代码：

$('.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();
});

无需点击任何侧边菜单项，on keyup 功能就可以完美运行。

我的问题一定在于left 点击，因为keyup 函数不再正常触发。

有什么想法吗？

Answer 1

这个

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

应该是

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

您可以将 body 替换为所选元素的任何父元素。

Answer 2

如果您使用 .on 处理被操纵的 Com，那么您使用 .on 的方式是错误的

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

正确的语法是

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

它将事件绑定到父元素，但仅在子元素发生事件时触发