jQuery脚本与SignalR冲突

JW贝克

我遇到了一个问题,该问题似乎应该相对简单解决,但到目前为止,答案仍在我眼前。

我正在使用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>
杰里米·韦斯特

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

我没有您的html,但是您可以尝试以下操作:

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章