Jquery 脚本与 SignalR 冲突

Question

我遇到了一个看起来应该相对容易解决的问题，但到目前为止我还没有找到答案。

我正在使用 SignalR 将新的局部视图返回到主页。当我的数据库使用新信息更新时，会调用使用新的局部视图更新 div 标签的客户端函数。到目前为止一切顺利。

现在我想添加更多 JQuery 代码来隐藏/显示部分视图中出现的表中的子行。

问题是到目前为止我只能让一个或另一个脚本工作。如果我让表格显示/隐藏功能正常工作，它会破坏我的 signalR 脚本，因此在服务器触发时我不再收到更新的部分视图。同样，当 signalR 正常工作时，我无法再激活显示/隐藏功能。

SignalR 似乎使用的是旧版本的 JQuery，但是为了使我添加的脚本能够正常工作，我必须添加对 jquery-1.10.2 的引用。 SignalR 不需要 jquery 引用，它只需要 jquery-signalR-2.1.2 引用。

所有这些脚本都位于显示局部视图的主页上，而不是局部视图。

我也尝试过让 JQuery 与两个脚本不冲突，但无济于事。

这似乎与同时引用两个版本的 JQuery 有关，但我不确定从这里到哪里使两个脚本一起工作。无论哪个脚本放在第一位，都会起作用。

这里是 signalR 脚本，只有它的依赖项：

<script src="/Scripts/jquery.signalR-2.1.2.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="/signalr/hubs"></script>
<script type="text/javascript">
    $(function () {
        // Declare a proxy to reference the hub.
        var notifications = $.connection.monitoringHub;

        //debugger;
        // Create a function that the hub can call to broadcast messages.
        notifications.client.updateDetails = function () {
            getDetails()
        };
        // Start the connection.
        $.connection.hub.start().done(function () {
            //alert("connection started")
            getDetails();
        }).fail(function (e) {
            alert(e);
        });
    });

    function getDetails() {
        var tbl = $('#systemDetails');
        $.ajax({
            url: '/Monitoring/GetDetails/@Model.Customer.SONumber.ToString()',
            contentType: 'application/html ; charset:utf-8',
            type: 'GET',
            dataType: 'html'
        }).success(function (result) {
            tbl.empty().append(result);
        }).error(function () {

        });
    }
</script>

这是我的用户脚本，具有所需的依赖项：

<script src="/Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $("body").on("click", "#deviceDetail", function () {
        $(this).closest('tr').next().toggle("slow");
        $(this).toggleClass("glyphicon-plus-sign glyphicon-minus-sign");
    });
    </script>

Answer 1

jquery 点击事件$(".glyphicon-plus-sign").click 仅在脚本最初运行（或页面首次加载）时连接到 DOM 中存在的项目。以后通过 AJAX 附加到您的表的任何项目都不会关联该事件。

我没有你的 html，但你可以试试下面的方法：

$("body").on("click",".glyphicon-plus-sign", function () {
   $(this).closest('tr').next().toggle("slow");
});

注意：body 可能不是最佳选择，这里的想法是在 AJAX 调用之前将点击事件添加到 DOM 中存在的项目。更好的选择可能是父表标签。