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> 

필요한 의존성 내 사용자 스크립트입니다 : JQuery와 클릭 이벤트 $(".glyphicon-plus-sign").click 만 항목까지 연결되어

<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

그 스크립트가 처음 실행될 때 (또는 페이지가 처음로드 될 때) DOM에 존재합니다. 나중에 AJAX를 통해 테이블에 추가 된 항목에는 이벤트가 유선 연결되지 않습니다.

나는 당신의 HTML을 필요는 없지만, 아래처럼 뭔가를 시도 할 수 있습니다 :

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

참고 : 몸이 아마 최선의 선택이 아니다, 여기에 아이디어는 항목에 클릭 이벤트를 추가하는 것입니다 AJAX 호출 전에 DOM에 존재합니다. 더 나은 옵션은 상위 테이블 태그 일 수 있습니다.