Question

我今天在我的一个JQuery脚本上运行了一个神秘的错误。我有一个像这样的简单HTML页面：

<section id="article" class="col-xs col-md col-lg-10 col-lg-offset-1">
    <nav id="page_menu">
        <ol>
            <li class="page_menu_selected"><a href="#9">Community</a></li>
            <li class="page_menu_unselected"><a href="#42">irc channels</a></li>
            <li class="page_menu_unselected"><a href="#40">mailing lists</a></li>
            <li class="page_menu_unselected"><a href="#38">q&amp;a section</a></li>
        </ol>
    </nav>
    <article class="show" id="9">
    <h3>TITLE:</h3>
        <p>Blablablba 01</p>
    </article>
    <article class="hidden" id="42"></article>
    <article class="hidden" id="40"></article>
    <article class="hidden" id="38">
        <h3>TITLE:</h3>
            <p>BLABLABLABLA 02</p>
    </article>
</section>

和JQuery相关的脚本：

$( document ).ready(function(){
    $( "li.page_menu_unselected" ).click(
        function(){
            $("li.page_menu_selected").toggleClass("page_menu_unselected page_menu_selected")
            $( this ).toggleClass("page_menu_unselected page_menu_selected");
    });
});

乍一看，当我开始测试我的代码时，似乎一切正常，因为我单击未选中的元素并且类正确切换，甚至是选择了类值的类。

此列表项元素具有初始＆＃34;选择＆＃34; class value是链接ID为9的列表。

问题是，当我点击这个列表元素时，它不会切换回其初始类unkike所有其他列表项。

如果我尝试在加载页面后尝试将我粘贴的代码推送到chrome控制台上并尝试使用它，TADA就像魅力一样！

我认为这是一个DOM问题，但无法弄清楚它的位置。

Answer 1

你应该在这里使用delegation，因为你的第一个项目在第一次加载时没有附加点击事件处理程序（它的class - page_menu_selected - 不同于jQuery选择器中使用的一个 - page_menu_unselected）。

使用delegation，您可以保证添加到适合DOM选择器的jQuery的所有未来元素都会以相同的方式选择：

$(function () {
    $(document).on('click', 'li.page_menu_unselected', function () {                 
        $('li.page_menu_selected').toggleClass('page_menu_unselected page_menu_selected');
        $(this).toggleClass('page_menu_unselected page_menu_selected');
    });
});

Demo

jQuery .on() - Direct and delegated events

Answer 2

发生的事情是页面加载时，它会立即找到所有li.page_menu_unselected，然后将事件附加到它们。当这些类发生更改时，附加的事件记录器将失败，因为它不再存在。使用delegate()将解决此问题。

$( document ).ready(function(){
    $(document).delegate("li.page_menu_unselected", "click", function(){
        $("li.page_menu_selected").toggleClass("page_menu_unselected page_menu_selected")
        $( this ).toggleClass("page_menu_unselected page_menu_selected");
    });
});

JQuery指令只能在一个目标上切换类

2 个答案: