在asp.net中使用updatepanel时不会调用jquery

Question

我有一个web应用程序，我正在使用网站某些部分的更新面板。更新面板正常工作，但问题是当我使用更新面板时，jquery不工作。首先我的jQuery是在更新面板里面。它没有工作，所以我试图把它放在updatepanel之外但是这也没有奏效。如果使用更新面板，是否还需要额外的东西才能使其工作。下面是我的代码

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
    <ContentTemplate> 
    <input id="decrement" type ="button" value="-" class="add-sub-button" /> 
           <asp:TextBox ID="quantity" ClientIDMode="Static" Text="1" CssClass="quantity" runat="server"></asp:TextBox> 
           <input id="increment" type ="button" value="+" class="add-sub-button" /> 
    </ContentTemplate> 

    <Triggers> 
    <asp:AsyncPostBackTrigger ControlID="medicinesList" EventName="SelectedIndexChanged" /> 
    </Triggers> 
</asp:UpdatePanel> 

<script type="text/javascript"> 
     $(document).ready(function() { 
      $("#increment").click(function() { 
       if ($('#quantity').val() != "90") { 
        var $n = $("#quantity"); 
        $n.val(Number($n.val()) + 1); 
       } 
      }); 

      $("#decrement").click(function() { 
       if ($('#quantity').val() != "1") { 
        var $n = $("#quantity"); 
        $n.val(Number($n.val()) - 1); 
       } 
      }); 

     }); 
    </script> 

Answer 1

使用像

<script type="text/javascript"> 
    $(document).ready(function() { 
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 
     Sys.WebForms.PageRequestManager.getInstance().beginAsyncPostBack(); 
     function EndRequestHandler(sender, args) { 
     $("#increment").click(function() { 
      if ($('#quantity').val() != "90") { 
       var $n = $("#quantity"); 
       $n.val(Number($n.val()) + 1); 
      } 
     }); 

     $("#decrement").click(function() { 
      if ($('#quantity').val() != "1") { 
       var $n = $("#quantity"); 
       $n.val(Number($n.val()) - 1); 
      } 
     }); 
     } 
    }); 
</script> 

Answer 2

直接绑定到UpdatePanel内的DOM元素的任何事件的Java脚本是在后背上丢失。因此您需要使用Delegated Events以确保保留所需的行为。

这是通过使用jQuery on()方法而不是click()结合事件容器中的UpdatePanel之外并指定selector paremeter（表示实际目标）来完成。

选择器 - 一个选择器字符串，用于过滤将调用处理程序的选定元素的后代。如果选择符为空或省略，则处理程序在到达选定元素时总是被调用。

<div id="myPanel"> 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
    <ContentTemplate> 
     <input id="decrement" type="button" value="-" class="add-sub-button" /> 
     <asp:TextBox ID="quantity" ClientIDMode="Static" Text="1" CssClass="quantity" runat="server"></asp:TextBox> 
     <input id="increment" type="button" value="+" class="add-sub-button" /> 
    </ContentTemplate> 

    <Triggers> 
     <asp:AsyncPostBackTrigger ControlID="medicinesList" EventName="SelectedIndexChanged" /> 
    </Triggers> 
    </asp:UpdatePanel> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 

    $("#myPanel").on("click", "#increment", function() { 
     if ($("#quantity").val() != "90") { 
     var $n = $("#quantity"); 
     $n.val(Number($n.val()) + 1); 
     } 
    }); 

    $("#myPanel").on("click", "#decrement", function() { 
     if ($("#quantity").val() != "1") { 
     var $n = $("#quantity"); 
     $n.val(Number($n.val()) - 1); 
     } 
    }); 

    }); 
</script>