javascript - 单击 html 中的链接不会将我重新路由到正确的页面

Question

在过去的两周里，我一直在努力让它工作，但我似乎找不到问题。当我单击用户与其聊天时，似乎并没有在两者之间创建聊天室。我已经按照该教程https://pusher.com/tutorials/chat-aspnet/进行操作但编辑了一些东西，比如我的数据库。调试后，当我单击其中一个用户链接时，它似乎没有执行任何操作。

我多次尝试重命名所有内容并重新开始。

我认为这可能与路由配置有关，或者它甚至没有在点击时调用 javascript gae。

它所做的只是将我当前的地址:localhost/chat更改为localhost/chat#

我的 JavaScript View :

Javascript:

 // get chat data
    function getChat(contact_id) {
        $.get("/contact/conversations/" + contact_id)
            .done(function(resp) {
                let chat_data = resp.data || [];
                loadChat(chat_data);
            });
    }

    //load chat data into view
    function loadChat(chat_data) {
        chat_data.forEach(function(data) {
            displayMessage(data);
        });

        $('.chat__body').show();
        $('.__no__chat__').hide();
    }

    // select contact to chat with
    $('.user__item').click(function(e) {
        e.preventDefault();
        currentContact = {
            id: $(this).data('contact-id'),
            name: $(this).data('contact-name'),
        };
        if (conversationChannelName) {
            pusher.unsubscribe(conversationChannelName);
        }
        conversationChannelName = getConvoChannel((@ViewBag.currentUser.Id * 1), (currentContact.id * 1));
        currentconversationChannel = pusher.subscribe(conversationChannelName);
        bind_client_events();

        $('#contacts').find('li').removeClass('active');
        $('#contacts .contact-' + currentContact.id).find('li').addClass('active');
        getChat(currentContact.id);
    });

    function getConvoChannel(user_id, contact_id) {
        if (user_id > contact_id) {
            return 'private-chat-' + contact_id + '-' + user_id;
        }
        return 'private-chat-' + user_id + '-' + contact_id;
    }

html

<div class="__no__chat__">
                                <p>Select a contact to chat with</p>
                            </div>
                            <div class="panel-body users__body">
                                <ul id="contacts" class="list-group">

                                    @foreach (var user in @ViewBag.allUsers)
                                    {
                                        <a class="user__item contact-@user.Id" href="#" data-contact-id="@user.Id" data-contact-name="@user.FirstName">
                                            <li>
                                                <div class="avatar">
                                                    <img src="@Url.Content("~/Content/no_avatar.png")">
                                                </div>
                                                <span>@user.FirstName</span>
                                                <div class="status-bar"></div>
                                            </li>
                                        </a>
                                    }
                                </ul>
                            </div>

路由配置:

routes.IgnoreRoute("{resource}.axd/{*pathInfo}");


            routes.MapRoute(
                name: "Home",
                url: "",
                defaults: new { controller = "Home", action = "Index" }
            );

            routes.MapRoute(
                name: "Login",
                url: "login",
                defaults: new { controller = "Auth", action = "Index" }
            );

            routes.MapRoute(
                name: "ChatRoom",
                url: "chat",
                defaults: new { controller = "Chat", action = "Index" }
            );

            routes.MapRoute(
                name: "GetContactConversations",
                url: "contact/conversations/{contact}",
                defaults: new { controller = "Chat", action = "ConversationWithContact", contact = "" }
            );

            routes.MapRoute(
                name: "PusherAuth",
                url: "pusher/auth",
                defaults: new { controller = "Auth", action = "AuthForChannel" }
            );

            routes.MapRoute(
                name: "SendMessage",
                url: "send_message",
                defaults: new { controller = "Chat", action = "SendMessage" }
            );

            routes.MapRoute(
                name: "MessageDelivered",
                url: "message_delivered/{message_id}",
                defaults: new { controller = "Chat", action = "MessageDelivered", message_id = "" }
            );

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Auth", action = "Index", id = UrlParameter.Optional }
            );

Answer 1

好吧，如果没有任何反应，这听起来像是页面上的 JS 有问题。首先排除这一点。

你在JS中做过调试输出吗？

首先，您能否包装您的点击事件，以便将其设置为文档就绪。

更新 - 还添加到 section 代码中，以确保所有内容都在正确的时间执行(即加载 JQuery 包之后)

在您看来:

@section scripts {
    $(document).ready(function() {
       
        $('.user__item').click(function(e) {
            e.preventDefault(); 
            console.log("click registered!");   //also add this directly at the beginning of the click event so you can see if something happens (or not)
            //...your original code below... 
        });
    
    });
}

注意:@section script... 应该在您的 View 中只出现一次。

在您的_Layout.cshtml文件中:

    ....
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>