JQuery：多个switch语句相互抵消答案

【问题标题】：JQuery: multiple switch statements cancelling eachother outJQuery：多个switch语句相互抵消
【发布时间】：2013-04-05 20:01:47
【问题描述】：

一次使用多个 switch 语句时遇到一些问题：

$(document).ready(function(){
    $('#menu').children('span').click(function(){
        whichsub = $(this).attr('id');
        switch (whichsub)   {
            case 'menu1':
            $('#submenu').load('menus/submenu1.html');
            break;
            case 'menu2':
            $('#submenu').load('menus/submenu2.html');
            break;
        };
        if ( $('#submenu').css('left') !== '150px' ) {$('#submenu').animate({left: '150px'}, 300);}
    });
    $('#submenu').children('span').click(function(){
        var whichcon = $(this).attr('id');
        switch (whichcon)   {
            case 'submenu1':
            $('#demopanel').load('content/profile.html');
            break;
            case 'submenu2':
            $('#demopanel').load('content/portfolio.html');
            break;
        };
        if ( $('#demopanel').css('marginLeft') !== '300px' ) {$('#demopanel').animate({marginLeft: '300px'}, 1000);}
    });
});

顶部开关更改子菜单并有条件地将其滑出，底部更改内容（“#demopanel”）。每个都独立工作，但是当我同时启用时，第二个无法工作 - 它就像脚本已经停止，因为在 $('#submenu').children('span').click(function(){ 之后放置的警报没有返回任何内容。

有什么想法可能会出错吗？我需要解除绑定吗？

谢谢。

【问题讨论】：

你能发布你的 HTML 结构吗？由于您使用的是子选择器元素，因此您可能选择了两次“菜单”项。导致我们的第一次点击事件被第二次覆盖。
不，#menu 和 #submenu 是具有所有唯一子 ID 的兄弟姐妹。认为是重复的 $(this) 导致问题？
不，“this”应该没问题。和Bipen一样，如果你正在加载的子菜单是“$('#submenu').load('menus/ submenu2.html');"，那么你的 "$('#submenu').children('span').click(function()" 将被注册，因此你必须使用 Bipen 所说的 "on" 事件。
是的，我试过这个（两个迭代都在这里发布），它似乎没有任何区别。谢谢
好的，我现在开始工作了，谢谢大家！代表提示是正确的。

标签： jquery switch-statement case

【解决方案1】：

委托子菜单点击，因为看起来您正在使用 on.. 加载动态内容。

$('#submenu').on('click','span',function(){
  ...

})

link 了解有关委托事件的更多信息

【讨论】：

【解决方案2】：

您的子菜单似乎正在动态加载，因此必须使用委托事件。试试这个..

  $('body').on('click','#submenu span',function(){
  ...

})

【讨论】：