Jquery script conflict with SignalR

I am running into an issue that seems like it should be relatively simple to solve but so far the answer has eluded me.

I am using SignalR to return a new partial view to the main page. The client function which updates the div tag with a new partial view is called when my database is updated with new information. So far so good.

Now I want to add more JQuery code to hide/show child rows in my tables which appear in the partial view.

The problem is so far I can only get one or the other script to work. If I get the table show/hide functionality working, it breaks my signalR script and thus I no longer receive updated partial views when triggered by the server. Likewise, when signalR is working correctly, I can no longer activate the show/hide functionality.

SignalR appears to use an older version of JQuery, however for my added scripts to work I have to add a reference to jquery-1.10.2. SignalR does not need a jquery reference, it only needs the jquery-signalR-2.1.2 reference.

All these scripts are located on the main page which the partial view appears on, not the partial view.

I have also tried to do JQuery no conflict with both scripts to no avail.

It seems to have something to do with two versions of JQuery being referenced at the same time, but I'm not sure where to go from here to make both scripts work together. Whichever script is placed first, is the one that works.

Here is the signalR script with only it's dependencies:

<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>

Here is my user script with the required dependency:

<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>

The jquery click event$(".glyphicon-plus-sign").click is only wired up for items that exist in the DOM when the script is initially ran (or page is first loaded). Any items appended to your table via AJAX at a later time will not have the event wired up.

I don't have your html, but you may try something like below:

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

Note: body is probably not the best choice, the idea here is to add the click event to an item that exists in the DOM before the AJAX call. A better option may be the parent table tag.