选择动态添加表单的元素

Question

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

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

选择器如下：

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

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

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

Answer 1

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

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

Answer 2

你可以试试javascript代码，

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

Answer 3

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

Answer 4

id 是定义 id 实体的 HTML 属性，或者用简单的英语来说，就是 HTML 标签的身份。由于具有完全相同标识的两个标签是无稽之谈，因此 id 应该是唯一的。这种情况是如此之多，以至于包含重复 id 的 HTML 被认为是无效的。

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

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

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

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

选择动态添加表单的元素

Selecting elements of dynamically added form

javascript

cocoon-gem