[javascript] jQuery $ (문서) .ready 및 UpdatePanels?

jQuery를 사용하여 UpdatePanel 내부의 요소에 대한 마우스 오버 효과를 연결합니다. 이벤트가 묶여있다$(document).ready . 예를 들면 다음과 같습니다.

$(function() {
    $('div._Foo').bind("mouseover", function(e) {
        // Do something exciting
    });
});

물론 이것은 페이지가 처음로드 될 때 제대로 작동하지만 UpdatePanel이 부분 페이지 업데이트를 수행 할 때 실행되지 않고 마우스 오버 효과가 UpdatePanel 내에서 더 이상 작동하지 않습니다.

첫 번째 페이지로드뿐만 아니라 UpdatePanel이 부분 페이지 업데이트를 실행할 때마다 jQuery에서 와이어 링을 권장하는 방법은 무엇입니까? 대신 ASP.NET 아약스 수명주기를 사용해야합니까 $(document).ready?



답변

UpdatePanel은 업데이트에서 업데이트 패널의 내용을 완전히 대체합니다. 이는 해당 업데이트 패널에 새로운 요소가 있으므로 가입 한 해당 이벤트가 더 이상 가입되지 않았 음을 의미합니다.

이 문제를 해결하기 위해 수행 한 작업은 모든 업데이트 후에 필요한 이벤트를 다시 구독하는 것입니다. 내가 사용 $(document).ready()하고 Microsoft의 사용, 초기 부하 PageRequestManager(사용 가능한 당신이 당신의 페이지에 업데이트 패널이있는 경우)에 대한 모든 업데이 트를 재 구독.

$(document).ready(function() {
    // bind your jQuery events here initially
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
    // re-bind your jQuery events here
});

PageRequestManager업데이트 패널이 페이지에있는 경우 자동으로 사용할 수있는 자바 스크립트 객체입니다. UpdatePanel이 페이지에있는 한 코드를 사용하기 위해 위의 코드 이외의 작업을 수행하지 않아도됩니다.

보다 자세한 제어가 필요한 경우이 이벤트는 .NET 이벤트에 인수를 전달하는 방법과 유사한 인수를 전달합니다. (sender, eventArgs) 하므로 이벤트를 발생시킨 원인을 확인하고 필요한 경우에만 리 바인드 할 수 있습니다.

다음은 Microsoft의 최신 버전의 설명서입니다. msdn.microsoft.com/…/bb383810.aspx


필요에 따라 더 나은 옵션은 jQuery를 사용하는 것 .on()입니다. 이 방법은 모든 업데이트에서 DOM 요소를 다시 구독하는 것보다 효율적입니다. 그러나이 방법을 사용하기 전에 모든 설명서를 읽으십시오. 요구 사항을 충족하거나 충족하지 못할 수 있습니다. 사용 리팩토링 불합리한 것이 jQuery를 플러그인이 많이 있습니다 .delegate()또는 .on()그렇게하는 경우는, 당신은 더 나은 다시 구독 길 이죠.


답변

<script type="text/javascript">

        function BindEvents() {
            $(document).ready(function() {
                $(".tr-base").mouseover(function() {
                    $(this).toggleClass("trHover");
                }).mouseout(function() {
                    $(this).removeClass("trHover");
                });
         }
</script>

업데이트 될 영역입니다.

<asp:UpdatePanel...
<ContentTemplate
     <script type="text/javascript">
                    Sys.Application.add_load(BindEvents);
     </script>
 *// Staff*
</ContentTemplate>
    </asp:UpdatePanel>


답변

UpdatePanel 내부에서 jQuery를 사용한 사용자 컨트롤

이것은 질문에 대한 직접적인 대답은 아니지만 여기에서 찾은 답변을 읽음 으로써이 솔루션을 종합했으며 누군가가 유용하다고 생각했습니다.

User Control 내에서 jQuery textarea limiter를 사용하려고했습니다. 사용자 컨트롤이 UpdatePanel 내부에서 실행되기 때문에 까다 로웠으며 콜백에서 바인딩이 손실되었습니다.

이것이 페이지 인 경우 여기에 대한 답변이 직접 적용되었을 것입니다. 그러나 사용자 컨트롤은 헤드 태그에 직접 액세스 할 수 없으며 일부 답변에 따라 UpdatePanel에 직접 액세스 할 수도 없습니다.

이 스크립트 블록을 사용자 컨트롤 마크 업의 맨 위에 올렸습니다. 초기 바인드의 경우 $ (document) .ready를 사용하고 거기에서 prm.add_endRequest를 사용합니다.

<script type="text/javascript">
    function BindControlEvents() {
        //jQuery is wrapped in BindEvents function so it can be re-bound after each callback.
        //Your code would replace the following line:
            $('#<%= TextProtocolDrugInstructions.ClientID %>').limit('100', '#charsLeft_Instructions');
    }

    //Initial bind
    $(document).ready(function () {
        BindControlEvents();
    });

    //Re-bind for callbacks
    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function() {
        BindControlEvents();
    });

</script>

그래서 .. 누군가 이것이 이것이 효과가 있다는 것을 알고 싶다고 생각했습니다.


답변

jQuery 1.3으로 업그레이드하고 다음을 사용하십시오.

$(function() {

    $('div._Foo').live("mouseover", function(e) {
        // Do something exciting
    });

});

참고 : 라이브는 대부분의 이벤트에서 작동하지만 전부는 아닙니다. 문서 에는 완전한 목록 이 있습니다 .


답변

시도해 볼 수도 있습니다.

<asp:UpdatePanel runat="server" ID="myUpdatePanel">
    <ContentTemplate>

        <script type="text/javascript" language="javascript">
        function pageLoad() {
           $('div._Foo').bind("mouseover", function(e) {
               // Do something exciting
           });
        }
        </script>

    </ContentTemplate>
</asp:UpdatePanel>

, pageLoad () 이후 페이지는 클라이언트 측에서로드 될 때마다 실행되는 ASP.NET ajax 이벤트입니다.


답변

내 대답은?

function pageLoad() {

  $(document).ready(function(){

기타

다른 많은 솔루션이 비참하게 실패한 매력처럼 작동했습니다.


답변

다음 방법 중 하나를 사용합니다.

  1. 함수에서 이벤트 바인딩을 캡슐화하고 페이지를 업데이트 할 때마다 실행하십시오. 이벤트를 동일한 요소에 여러 번 바인드하지 않도록 항상 특정 요소에 대한 이벤트 바인딩을 포함 할 수 있습니다.

  2. 기본적으로 자동 방법으로 방법 1을 수행 하는 라이브 쿼리 플러그인을 사용하십시오 . 이벤트 바인딩에 대해 원하는 제어량에 따라 선호도가 달라질 수 있습니다.