jquery - 在 $.get() 之后点击隐藏 HTML 元素

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 加载内容的常见问题，因为旧的处理程序不再适用于动态添加的内容，除非您使用事件委托(delegate)，如上所示。

此外，不要使用 document，而是为 #menu-container > ul > li > a 的关闭父元素使用选择器。