Question

我正在尝试创建一个相当简单的向下钻取菜单，使用jQuery中的$.get()将一些页面加载到div中。除了一个问题，一切都按预期工作。通过$.get()调用成功加载HTML后，对活动列表项中链接以外的主钻取链接的任何点击都会导致#menu-list通过display: none;隐藏。我确信我在这里遗漏了一些非常简单的东西，但我似乎无法发现错误。

这是我的 HTML ：

<div id="menu-container">
    <ul id="menu-list">
        <li class="main-drill">
            <a href="/somepage">Main Drill 1</a>
        </li>
        <li class="main-drill">
            <a href="#">Main Drill 2</a>
            <ul>
                <li class="sub-drill"><a href="/somepage">Sub Drill 1</a></li>
                <li class="sub-drill"><a href="/somepage">Sub Drill 2</a></li>
                <li class="sub-drill"><a href="/somepage">Sub Drill 3</a></li>
            </ul>
        </li>
        <li class="main-drill">
            <a href="#">Main Drill 3</a>
            <ul>
                <li class="sub-drill"><a href="/somepage">Sub Drill 1</a></li>
                <li class="sub-drill"><a href="/somepage">Sub Drill 2</a></li>
                <li class="sub-drill"><a href="/somepage">Sub Drill 3</a></li>
            </ul>
        </li>
    </ul>
</div>
<div id="main-content">
    The main HTML content is displayed here.
</div>

我的 jQuery 代码：

$('#menu-container > ul > li > a').live('click', function(e) {
    var url = $(this).attr('href');

    if (url == '#') {
        var parentElement = $(this).parent();
        var checkElement = $(this).next();

        $('#menu-container li').removeClass('active');
        $(this).closest('li').addClass('active');

        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            $(this).closest('li').removeClass('active');
            parentElement.children('ul').slideUp('normal');
        }

        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu-container ul ul:visible').slideUp('normal');
            parentElement.children('ul').slideDown('normal');
        }

        if ($(this).closest('li').find('ul').children().length == 0) {
            return true;
        } else {
            return false;
        }
    }
});

$('#menu-container > ul > li > ul > li > a').live('click', function (e) {
    e.preventDefault();
    var url = $(this).attr('href');

    $.get(url, function (response) {
        $('#main-content').html(response);
    });
});

Answer 1

因为您要动态添加元素，请尝试以下方法：

$(document).on('click','#menu-container > ul > li > a',function() {

//code

});

这是加载AJAX的内容的常见问题，因为旧的处理程序不再适用于动态添加的内容，除非您使用事件委托，如上所示。

此外，代替文档，使用选择器作为＃menu-container＆gt;的关闭父元素。 ul＆gt; li>一个

$ .get（）后点击隐藏HTML元素

1 个答案: