在 asp.net 中使用 updatepanel 时未调用 Jquery答案

【问题标题】：Jquery not called while using updatepanel in asp.net在 asp.net 中使用 updatepanel 时未调用 Jquery
【发布时间】：2016-05-15 13:45:13
【问题描述】：

我有一个网络应用程序，我正在使用网站某些部分的更新面板。更新面板工作正常，但问题是当我使用更新面板时有 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>

【问题讨论】：

标签： asp.net vb.net updatepanel

【解决方案1】：

像使用你的java脚本

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

【讨论】：

【解决方案2】：

任何直接绑定到UpdatePanel 内的DOM 元素的事件都会在回发时丢失。因此，您需要使用Delegated Events 来确保保留所需的行为。

这是通过将事件绑定到UpdatePanel 之外的容器并使用jQuery on() 方法而不是click() 指定selector 参数（代表实际目标）来完成的。

selector - 一个选择器字符串，用于过滤将调用处理程序的选定元素的后代。如果选择器为 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>

【讨论】：