Question

以下是我正在处理的网站：http://cirkut.net/sub/northwood/popunder/

基本上我要做的是将鼠标悬停在下拉菜单上，然后点击侧面的四个链接，它会根据您选择的内容更改内容。我的过滤适用于初始加载，但点击后，让我们说Locations，没有任何内容传播到中间和右侧内容列。

到目前为止，这是关键字的代码：

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

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

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

正确的语法是

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

它会将事件绑定到父元素，但仅在子元素

上发生事件时才会触发

Answer 2

此

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

应该是

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

您可以使用所选元素的任何父元素替换body。

更改DOM时，.on不能按预期工作

2 个答案: