使用 jQuery 时可以在 UpdatePanel 中放置控件吗？答案

【问题标题】：Is it ok to place controls inside UpdatePanel when using jQuery?使用 jQuery 时可以在 UpdatePanel 中放置控件吗？
【发布时间】：2012-09-28 19:33:26
【问题描述】：

使用此 jQuery 代码，我试图在单击时选择控件内的文本。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">

        jQuery(document).ready(
            function () {
                jQuery("input[type='text']").click(function () {
                    this.select();
                });
            });  

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox Text="Text 1" ID="txt1" ClientIDMode="Static" runat="server" />
        <asp:Button Text="Submit" ID="btn1" OnClick="btn1_Click" runat="server" />
        <asp:TextBox Text="Text 2" ID="txt2" ClientIDMode="Static" Visible="false" runat="server" />
    </div>
    </form>
</body>
</html>

代码背后：

protected void btn1_Click(object sender, EventArgs e)
    {
        txt2.Visible = true;
    }

问题是当我将页面内容放入 UpdatePanel 时，jQuery 首次在 txt1 上运行。单击按钮时，它不适用于任何文本框。

    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <asp:TextBox Text="Text 1" ID="txt1" ClientIDMode="Static" runat="server" />
            <asp:Button Text="Submit" ID="btn1" OnClick="btn1_Click" runat="server" />
            <asp:TextBox Text="Text 2" ID="txt2" ClientIDMode="Static" Visible="false" runat="server" />
</ContentTemplate>
    </asp:UpdatePanel>

在使用 Chrome 控制台进行调试时，我发现 jQuery 没有定义 - 很奇怪 :-( 你能否提出可能的问题。

感谢您的宝贵时间。

编辑：根据您的回复，我尝试遵循这些解决方案，对我来说都很好。

将事件绑定到 form1，并将其包含在准备好的文档中。

> jQuery(document).ready(
>       function () {
>           jQuery("#form1").on("click", "input[type='text']", function () {
>               this.select();
>           });
>       });

将事件绑定到文档本身 -

jQuery(document).on("click", "input[type='text']" ,function () { this.select(); });

第一个对我来说似乎更安全，性能更高，你有什么建议？

【问题讨论】：

我认为这里可以解决您的问题stackoverflow.com/questions/2313882/…

标签： jquery asp.net

【解决方案1】：

当更新面板中的内容被更新时，元素被替换为没有事件绑定的新元素。

您需要使用delegate 而不是将事件绑定到元素本身。将其绑定在更新面板周围的元素上，以便在更新面板中的内容被替换后处理事件：

对于 jQuery 1.4.2 及更高版本：

jQuery("#form1").delegate("input[type='text']", "click", function () {
  this.select();
});

对于 jQuery 1.7 及更高版本：

jQuery("#form1").on("click", "input[type='text']", function () {
  this.select();
});

【讨论】：

我试过 1.7。似乎必须将代码包装在 $(document).ready 中。我说的对吗？
@autrevo：是的。我只是展示了绑定委托的代码。
谢谢。在更新的问题中，哪个版本似乎具有更大的性能优势？
@autrevo：您应该始终尝试将委托绑定到尽可能小的范围。如果您在文档级别绑定所有委托，则发生的每个事件都将通过该代码，并且每次都必须查找所有选择器。此外，您可以使用范围更小的更简单的选择器。如果您在文档级别绑定，则选择器必须更具体，这样您就不会冒险从您感兴趣的范围之外的元素中捕获事件。

【解决方案2】：

您必须使用live 或on 注册click 事件，因为您拥有的点击事件在ajax 调用上是未绑定的。 live 或 on jquery 方法确保在将元素添加到 DOM 时重新绑定事件，live 或 on 选择器下。您的 jquery 版本很旧，您需要升级它可能是 1.7.2

jQuery(document).ready(
      function () {
            jQuery(document).on("click", "input[type='text']", function () {
            this.select();
       });
});

【讨论】：