Selecting elements of dynamically added form

Question

I have a Rails form dynamically generated by Cocoon gem. I start page with one element, but most likely will add much more.

Unfortunately, jquery selector which should apply on them, does not work.

The selector is as follows:

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

My aim is to open datepicker when input fields with id datepicker are being clicked on.

Funny thing, the first form on the page would show datepicker if I click the field, then click elsewhere, then click the field again.

If you're going to have multiple things with `#datepicker`, try using a class or a data-attribute, rather than an id. I.e. try changing `#datepicker` to `[data-datepicker]`, and in your datepicker div, add `data-datepicker` — Obversity, Mar 19 '16 at 11:18

score 2 · Answer 1 · answered Mar 19 '16 at 11:21

2

Are you saying that you will have multiple datepickers with the same ID? An ID can only be used on a single element, so try giving your datepickers a class instead and that should work.

answered Mar 19 '16 at 11:21

Patrick Lewis

83
6

score 1 · Answer 2 · answered Mar 19 '16 at 11:06

Try triggering the event blur and then 'focus' after you add datepicker to the field. there is another chance that you have multiple elements with id datepicker, which is wrong. You need to use class if that is the case. Also use this as slector when binding the datepicker in the function.

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

score 0 · Answer 3 · answered Mar 19 '16 at 11:07

0

you can try the javascript code,

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

answered Mar 19 '16 at 11:07

Jose Manuel Casal

21
3

score 0 · Accepted Answer · edited May 23 '17 at 11:50

id is the HTML attribute to define the id-entity, or, in plain English, the identity of an HTML tag. Since it is nonsense to have two tags with the very same identity, id is expected to be unique. That is so much the case that an HTML which contains duplicated ids is considered to be invalid.

So, your selector tells jquery that the identity with a given id should be searched for. jquery on the other hand will search for that identity and will stop its search when the first corresponding tag is found. The reason of this is that it is pointless to continue the search for a unique identity if it was already found. So, the selector will find the very first tag having that id and will do whatever needs to be done for it.

Other answers suggested that you should use a class. The logic behind that is that the class is effectively a classification, so its findings share a common pattern of classification, which means that when the first such tag is found, the search will be continued. This is a clever idea, but it is not the only solution. To put it into more general terms: you need to have valid html and a selector which does not assume that the finding is unique.

You can do that with ids sharing a pattern if you really prefer the usage of id in this case. Notice that the solution of the example did not contain a hashtag.

Also, it is not a good idea to initialize a datepicker each time a click is issued on a given tag. You should do it only once per tag.

Selecting elements of dynamically added form

4 Answers4