Jquery 脚本与 SignalR 冲突

Question

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

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

现在我想将更多 JQuery 代码添加到我的 table 中显示在局部视图中的 hide/show 子行。

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

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 附加到您的 table 的任何项目都不会连接事件。

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

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

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

Jquery 脚本与 SignalR 冲突

Jquery script conflict with SignalR

jquery

asp.net-mvc

signalr