选择动态添加表单的元素答案

【问题标题】：Selecting elements of dynamically added form选择动态添加表单的元素
【发布时间】：2016-03-20 03:29:32
【问题描述】：

我有一个由 Cocoon gem 动态生成的 Rails 表单。我从一个元素开始页面，但很可能会添加更多。

不幸的是，应该应用于它们的 jquery 选择器不起作用。

选择器如下：

$(document.body).on("click", "#datepicker",       function() {
    $( "#datepicker" ).datepicker({
    });
});

我的目标是在单击带有 id datepicker 的输入字段时打开 datepicker。

有趣的是，如果我单击该字段，页面上的第一个表单将显示日期选择器，然后单击其他位置，然后再次单击该字段。

【问题讨论】：

如果您要使用 #datepicker 处理多个内容，请尝试使用类或数据属性，而不是 id。 IE。尝试将 #datepicker 更改为 [data-datepicker]，然后在您的 datepicker div 中添加 data-datepicker

标签： javascript cocoon-gem

【解决方案1】：

您是说您将拥有多个具有相同 ID 的日期选择器吗？ ID 只能用于单个元素，因此请尝试为您的日期选择器提供一个类，这样应该可以。

【讨论】：

【解决方案2】：

尝试触发事件blur，然后在将日期选择器添加到字段后“聚焦”。还有一个可能是您有多个 id 为 datepicker 的元素，这是错误的。如果是这种情况，您需要使用类。在函数中绑定datepicker时也可以使用this作为选择器。

$(document.body).on("click", "#datepicker", function() {
    $(this).datepicker();
    $(this)
        .trigger('blur')
        .trigger('focus');
});

【讨论】：

【解决方案3】：

id 是用于定义 id-entity 的 HTML 属性，或者用简单的英语来说，是 HTML 标记的标识。由于拥有两个具有相同标识的标签是无稽之谈，因此id 应该是唯一的。在这种情况下，包含重复的ids 的 HTML 被认为是无效的。

因此，您的选择器告诉 jquery 应该搜索具有给定 id 的身份。另一方面，jquery 将搜索该身份，并在找到第一个相应标签时停止搜索。这样做的原因是，如果已经找到了唯一身份，则继续搜索它是没有意义的。所以，选择器会找到第一个带有 id 的标签，并会为它做任何需要做的事情。

其他答案建议您使用class。这背后的逻辑是class实际上是一个分类，所以它的发现共享一个共同的分类模式，这意味着当找到第一个这样的标签时，搜索将继续。这是一个聪明的想法，但它不是唯一的解决方案。用更一般的术语来说：您需要有有效的 html 和一个不假定结果是唯一的选择器。

如果您真的更喜欢在这种情况下使用 id，您可以使用 ids sharing a pattern 来做到这一点。请注意，示例的解决方案不包含主题标签。

此外，每次对给定标签发出点击时都初始化日期选择器不是一个好主意。每个标签你应该只做一次。

【讨论】：

【解决方案4】：

你可以试试javascript代码，

document.getElementById("datepicker").onclick = function (){
    // you onclick code...
    $( "#datepicker" ).datepicker({
    });
};

【讨论】：