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