Jquery：现在不存在但将来会存在的元素的选择器？

Posted 2023-03-05

【中文标题】Jquery：现在不存在但将来会存在的元素的选择器？

【英文标题】：Jquery: selector for elements that don't exist now, but will exist in future?

【发布时间】：2012-08-26 02:39:25

【问题描述】：

在 aspx 页面中，有一个网格视图，它有复选框的模板控件，类似这样的

<asp:gridview .....
  <columns>
    <asp:TemplateField>
      <HeaderTemplate>
        <asp:CheckBox ID="chkAll" runat="server"/>
      </HeaderTemplate>
      <ItemTemplate>
        <asp:CheckBox ID="chkSelect" runat="server"/>
      </ItemTemplate>
    </asp:TemplateField>
...

现在如果我写类似

$(#'<%=chkSelect.ClientID%>').something( function() );

我收到一条错误消息，提示“chkSelect 在当前上下文中不存在，这很明显，因为加载 griddata 时该元素将存在，我所做的是将复选框的更改事件绑定到委托..

$("body").delegate(":checkbox", "change", function () 
                custList = $(':checkbox:checked').map(function ()  return $(this).closest('tr').find('.grdCustName').text() ).get();
                $('#<%=hdnFromCustomer.ClientID %>').val(custList);
            

这又可以正常工作了，问题是我需要知道具有特定 ID 的复选框（例如，此处为 chkAll）是否已更改（单击），然后选中所有复选框，全部选中而不是问题，我可以用 $(':checkbox').attr(checked, 'on') 之类的东西来做到这一点。

但问题是，如果我写 $('#<%=chkAll.ClientID %>')，它不允许我这样做，因为此复选框在启动时不存在于 DOM 中，但当用户单击 showReport 按钮并填充网格时将可用。

所以，基本上，我的问题是如何选择，或者我应该使用什么选择器来选择 DOM 中不存在但将来某个时间会存在的这个复选框（或任何其他元素）？

编辑：针对一些答案，问题不具有约束力，我已经使用delegate() 完成了，我也可以使用.on() 或.live() 完成。问题就像Felix Kling 评论的那样，他一针见血，（阅读他的评论和我对他的回复）。问题是页面启动时 DOM 中的 元素不存在。 它是动态构建的，当用户点击showReport 按钮时，gridview 会填充数据，这是创建此元素的位置。虽然我通过Yoeri 描述的方法可能/可能不起作用，但我想知道是否有任何可能的方法（当然是通过 jQuery！）我可以选择这种情况下描述的元素，或者我唯一的选择是寻找类似Yoeri 回答的替代方案吗？

【问题讨论】：

'chkSelect 在当前上下文中不存在' - 这是 JS 消息吗？我从未见过 jQuery 显示这样的消息。它只是默默地什么都不做。

使用 jquery live() api.jquery.com/live 或从 jquery 1.7 开始

我不明白，如果使用.delegate（或.on）有什么问题？ edit: 啊，现在我明白了……在你绑定事件处理程序的那一刻，你甚至不知道 ID。您选择的方法通常很好，但由于 .NET 在这里失败了。

jQuery live 很好，但它已被弃用，很快就会被删除。所以delegate 或on

我不了解 .NET，但您应该尝试为元素指定一个固定 ID（如果可能的话）并改用该 ID。

【参考方案1】：

为什么不在自定义属性或类上选择 chkAll 框？

我经常使用 action 属性将事件绑定到 ... 只是为了保持所有事物的一致性并与 css 类分开（这不是为了将行为绑定到它，而是为了样式 ;-)

<input type="check" action="checkAll"
...
$('input[action=checkAll]').delegate(....) 

至于添加action属性，可以看这里...（避免添加额外的span元素） adding-custom-attributes-to-an-aspcheckbox-control

【讨论】：

OP似乎知道这一点，他使用了.delegate。

【参考方案2】：

在 WebForms 中工作时，我经常使用带有选择器的结尾。在您的情况下，您正在寻找的选择器将显示为：

$("input[id$='checkAll']")

或者，如果您使用的是 WebForms 4.0，您可以将复选框上的 client id mode 设置为静态，您可以获得一个相对健全的 id 来硬编码作为您的选择器。

【参考方案3】：

只需运行构建并从后面的 .net 代码运行 jquery 代码。

此 Gist 中的代码将有助于使其快速简单：https://gist.github.com/3415335