Slicknav 和委托点击事件答案

【问题标题】：Slicknav and delegated click eventsSlicknav 和委托点击事件
【发布时间】：2016-06-26 16:50:00
【问题描述】：

我对编码比较陌生，我的理解有限。但是根据插件作者的说法，我正在将 Slicknav 用于移动屏幕尺寸。

“SlickNav 菜单项是动态创建的”，因此我需要在创建 SlickNav 后使用委托的单击事件或附加事件处理程序。 My SlickNav post

我需要一些帮助。根据This，我尝试制作委托事件。

这是一个“直接”事件处理程序的原始代码（我认为）

menuitem.eq(0).on('click', function(){
status = 1;
clearBox();
statusCheck();

});

顺便说一句，我所有的代码都试图做的是 1. 清除作为内容显示窗口的容器。并且 2. 根据单击的菜单项将正确的内容附加到该窗口。

这是我对委托事件的尝试：

$('#navMenu').on('click',menuitem.eq(0), function(){
status = 1;
clearBox();
statusCheck();

});

还尝试将 .on() 替换为 .delegate()，没有骰子。

为了完整性，包括 cick 事件正在调用的函数

function clearBox(){
$("#display_box").children().fadeOut(1000).appendTo(".holding");


};

function statusCheck(){
    if (status == 1){

    displaycontent.eq(0).fadeIn(1000).appendTo("#display_box");
    displaycontent.eq(0).removeClass("hide");
    $("#display_box").animate({scrollTop:0},500);
    } else{}

    if (status == 2){

    displaycontent.eq(25).fadeIn(1000).appendTo("#display_box");
    displaycontent.eq(25).removeClass("hide");
    $("#display_box").animate({scrollTop:0},500);
    } else{}  
    // Etc Etc Etc

编辑：为菜单提供 HTML

<div class ="menu_wrap"> 
<nav id = "navMenu">
<ul class ="clearfix menu">
 <li>General
    <ul class="subMenu1">
        <li class ="menu_item">Introduction</li>
        <li class ="menu_item"> What you need</li>
        <li class ="menu_item">House Rules</li>
        <li class ="menu_item">Running the Game</li>
        <li class ="menu_item">Survival</li>
        <li class ="menu_item">Encounters</li>

    </ul>
   </li>
    <li>The World 
        <ul class ="subMenu1">
            <li class ="menu_item">Nol</li>
            <li class ="menu_item">Wol</li>
            <li class ="menu_item">Sol</li>
            <li class ="menu_item">Eol</li>
        </ul>   
    </li>
    <li><a href="index_maps.html">Locations and Maps</a></li>
<li>Races and Cultures
    <ul class ="subMenu1">
            <li> <a class="allow_default" href="index_npcs.html"   target="blank">NPC Creatures</a></li>
            <li class ="menu_item"> Voran Kingdom</li>
            <li class ="menu_item">Doval Empire</li>
            <li class ="menu_item">Salatai Sultanate</li>
            <li class ="menu_item">Gamoran Republic</li>
            <li class ="menu_item">Elandel</li>
            <li class ="menu_item">Kingdom of Night</li>
            <li class ="menu_item">Halflings</li>
            <li class ="menu_item">Aiur' Dun</li>
            <li class ="menu_item">Half-Elves</li>
            <li class ="menu_item">Half-Orcs</li>
            <li class ="menu_item">Dryads</li>

    </ul>
</li>
<li> Organizations
    <ul class ="subMenu1">
            <li class="menu_item">Information</li>
            <li class ="menu_item">The Green Wardens</li>
            <li class ="menu_item">The Temple of Light</li>
            <li class ="menu_item">The Black Hand</li>
            <li class ="menu_item">The Stone Priests</li>
            <li class ="menu_item">The Golden Company</li>
            <li class ="menu_item">The Dread Guards</li>
            </ul>

</li>

<li class ="menu_item">Character Creation
    <ul class ="subMenu1">
        <li class ="menu_item"> <a class="allow_default"      href="index_personality_test.html" target="blank">Creation Test</a></li>
    </ul>   
</li>


</ul>
</nav>
</div>

【问题讨论】：

当使用.on() 进行委托事件处理时，.on() 的第二个参数应该是选择器，而不是 JQuery 对象（或 DOM 元素）。也就是说，它应该是一个字符串。
那么$('#navMenu').on(menuitem.eq(0),'click', function(){ status = 1; clearBox(); statusCheck(); });这行得通吗？
不，'click' 应该是第一个参数，但是对于第二个参数，您需要使用一个选择器来标识您想要的菜单项元素或元素，而不是使用menuitem.eq(0)处理点击事件。
好吧，我不能使用一个类，因为它们都有相同的类....而且我不能使用一个 ID，因为 SLicknav 通过克隆菜单来工作，而 HTML 不允许两个相同的 ID。 ..所以我想我可以使用一个包含字符串“XXXXXX”的选择器，然后为每个列表项更改它？但是我还是很新，刷新我的记忆在这种情况下我该怎么做？
你能展示一下你原来的<ul>元素是什么样子的吗？我相信你在上面定义了<ul> element and then call .slicknav()`。

标签： javascript jquery delegates slicknav

【解决方案1】：

试试这样的：

<nav id="navMenu">
<ul class="clearfix menu">
 <li>General
    <ul class="subMenu1">
        <li class="menu_item" data-item="intro">Introduction</li>
        <li class="menu_item" data-item="requirements">What you need</li>
        <li class="menu_item" data-item="rules">House Rules</li>
...

这适用于 JavaScript：

$('#navMenu, .slicknav_menu').on('click', '.menu_item', function() {
    clearBox();

    switch($(this).attr('data-item')) {
        case 'intro': {
            // Do something here.
            break;
        }
        case 'requirements': {
            // Do something here.
            break;
        }
        case 'rules': {
            // Do something here.
            break;
        }
        // More cases...
    }
});

SlickNav 创建的克隆菜单似乎直接放在<body> 元素下，因此您不能仅在#navMenu 元素上调用.on()。您可以在body 元素上调用它，但上面的代码在#navMenu 和.slicknav_menu 元素上都调用它。 SlickNav 生成的<ul> 元素上有slicknav_menu 类。

如上所述，上面的代码必须在您调用.slicknav() 之后调用，因为它要求在调用时克隆菜单存在。否则，您将不得不更改为$('body').on(...。

至于其余部分，选择器'.menu_item' 标识所有菜单项元素，因此单击事件处理程序将为所有这些元素执行。但是每个菜单项元素的data-item 属性值不同。这样你就可以为每个人做一些不同的事情。

jsfiddle

【讨论】：

$('#navMenu').on('click', '.menu_item', function() { clearBox(); switch($(this).data-attr('item')) { case 'intro': { status = 1; statusCheck(); break; } }; }); 似乎不起作用，它既杀死了本机菜单的原始功能，也似乎完全阻止了 Slicknav 的工作。当屏幕缩小时，Slicknav 不会触发。
更正：是我，我不小心把slicknav的调用搞砸了，这个语句对SLickNav的操作没有影响，但它仍然破坏了菜单项的功能。似乎调用了清除框，因为单击 Intro 菜单项会从显示窗口中删除欢迎显示，但是用于检查变量位置的警报（状态）不起作用。警报调用位于 status=1 之后。当 SlickNav 可见时，它也不会产生任何影响
@LucianKain - 由 SlickNav 创建的克隆菜单似乎没有放在原始菜单旁边，而是放在 body 元素下方。我已经更新了我的答案。
不，不工作。更多线索：我调整了屏幕大小，使其以“quickNav”模式启动并回收页面。在此模式下，clearbox 不再在单击时触发。好像点击处理程序甚至没有附加到菜单的快速导航版本。它真气。同样的问题在“本机”模式下只有 clearbox() 触发，状态未设置为 1 并且 statuscheck() 未触发，这会杀死功能
编辑：我没有看到您希望我将调用移动到代码块之前的 slicknav。我已经这样做了，它仍然无法将正确的文本附加到显示窗口，但它确实可以调用 clearbox。它在移动屏幕和桌面屏幕都调用clearbox。