JQuery

Question

我正在尝试根据用户当前单击的菜单项为我的网站加载不同的内容。对 load() 的初始调用；功能正常。但是当单击菜单项时，不会向服务器发送请求。控制台中也没有出现错误。

$(function () {
    load("Lobby/News");//Works fine

    $("#homeMenuItem").click(function () {
        event.preventDefault();
        load("Lobby/News");//Doesn't send a new request to server
    });

    $("#otherMenuItem").click(function () {
        event.preventDefault();
        load("Lobby/Other");//Doesn't send a new request to server
    });
});


function load(location) {
    var $dummy = $("#dummy");

    //Load home by default
    $dummy.load(location, function (response, status, xhr) {
        var $container = $("#lobbyContent");
        if (status != "success") {
            $container.html('an error has occured');
        }
        else {
            $container.html($dummy.html());
        }
        $dummy.remove();
    });
}

<div>
    <section id="lobbyContent" class="row">
        @RenderBody()
        <div id="dummy"></div>
    </section>
</div>

服务器是 ASP.NET MVC 5 应用程序

Answer 1

The initial call to the load(); function works fine. But when clicking a menu item no request is send to the server. No errors appear in console either.

$dummy.remove(); 在第一次调用 load 后从 DOM 中删除 #dummy 元素。当 load 再次调用时，DOM 中没有 #dummy 元素将 .load() 方法链接到

JQuery - 加载函数

JQuery - load function

partial-views