Выбор элементов динамически добавленной формы

Question

У меня есть форма Rails, динамически генерируемая драгоценностью Cocoon. Я запускаю страницу с одним элементом, но, скорее всего, добавлю гораздо больше.

К сожалению, селектор jquery, который должен применяться к ним, не работает.

Селектор выглядит следующим образом:

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

Моя цель состоит в том, чтобы открыть DatePicker, когда поля ввода с идентификатором DatePicker в настоящее время щелкнули.

Смешная вещь, первая форма на странице будет показывать дату, если я нажму на поле, а затем нажмите в другом месте, а затем снова щелкните поле.

Answer 1

id - это атрибут HTML, определяющий идентификатор-идентификатор или, на простом английском языке, идентификатор HTML-тега. Поскольку абсурдно иметь два тега с одинаковой идентичностью, ожидается, что id будет уникальным. Это так много, что HTML, который содержит дублированный id s, считается недопустимым.

Итак, ваш селектор сообщает jquery, что нужно искать идентификатор с данным id. jquery, с другой стороны, будет искать это имя и остановит его поиск, когда будет найден первый соответствующий тег. Причина этого в том, что бессмысленно продолжать поиск уникальной идентичности, если она уже была найдена. Таким образом, селектор найдет самый первый тег, имеющий id, и сделает все, что нужно для этого.

Другие ответы предложили использовать class. Логика заключается в том, что class эффективно классифицируется, поэтому его результаты имеют общую схему классификации, а это означает, что при обнаружении первого такого тега поиск будет продолжен. Это умная идея, но это не единственное решение. Чтобы привести его в более общие термины: вам нужно иметь действительный html и селектор, который не предполагает, что поиск уникален.

Вы можете сделать это с помощью ids sharing a pattern, если вы действительно предпочитаете использовать идентификатор в этом случае. Обратите внимание, что решение примера не содержит хэштега.

Также не рекомендуется инициализировать дампикера каждый раз, когда на данный тег выдается клик. Вы должны делать это только один раз за тег.

Answer 2

Попробуйте запустить событие blur, а затем нажмите «focus» после того, как вы добавите datepicker в поле. есть еще один шанс, что у вас есть несколько элементов с id datepicker, что неверно. Вам нужно использовать класс, если это так. Также используйте this в качестве slector при привязке функции datepicker.

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

Answer 3

вы можете попробовать коды, в

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

Answer 4

Вы говорите, что вы будете иметь несколько datepickers с тем же ID? Идентификатор может использоваться только для одного элемента, поэтому попробуйте дать своим дампикам класс вместо этого, и это должно работать.