asp.netでupdatepanelを使用しているときにJqueryが呼び出されない

Question

Webアプリケーションの一部で、Webサイトの一部の更新パネルを使用しています。更新パネルが正常に動作していますが、更新パネルを使用すると動作しないjqueryがあります。最初は私のjqueryが更新パネルの内側にありました。それはうまくいきませんでしたので、私はそれをupdatepanelの外に置こうとしましたが、それも機能しませんでした。 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

のようなあなたのJavaスクリプトを使用して直接UpdatePanel内のDOM要素にバインドされた任意のイベントがポストバックに失われます。ですしたがって、希望の動作が維持されるように、Delegated Eventsを使用する必要があります。

これはUpdatePanelの外容器にイベントを結合するとjQuery on()方法代わりのclick()を使用して（実際のターゲットを表す）selector paremeterを指定することによって行われます。

セレクタ - ハンドラを呼び出す選択された要素の子孫をフィルタリングするセレクタ文字列。セレクタがnullまたは省略されている場合、ハンドラは選択された要素に到達すると常に呼び出されます。

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