jQuery datepicker не работает с динамическим HTML

Я задал этот вопрос раньше, а также здесь . Однако ни один из предложенных ответов не работал. Спустя несколько дней проблема все еще не решена. Поэтому я снова спрашиваю, с еще несколькими подробностями, чтобы узнать, сможет ли кто-нибудь помочь мне решить проблему.

У меня есть поле ввода, которое создается через Ajax с серверной стороны и вставлено в текущую страницу. Моя проблема заключается в том, что jQuery date picker не работает в поле ввода, когда он создается через Ajax, но он работает, когда поле непосредственно помещается на страницу.

Ниже я включаю сокращенную версию моего кода.

Код HTML:

<form id="user-form"></form> 

И вот код jQuery, который должен активировать datepicker на нем.

 $.ajax({ type: "GET", url: "/inputfield-loader.php" , success: function(data) { $('#user-form').html(data); $("#datefield").datepicker(); } }); 

И вот inputfield-loader.php

 <input type="text" name="firstname" id="firstname"></div> <div><input type="text" name="email" id="email"></div> <div><input type="text" name="birthdate" id="datefield"></div> <div><input type="submit"></div> 

Все работает нормально, если поле ввода просто закодировано на странице. Но когда он вставлен в DOM в качестве строки возврата вызова Ajax, сборщик дат больше не работает. Однако, когда я использую Chrome для проверки поля datefield , я вижу, что он добавил к нему класс hasDatepicker jQuery hasDatepicker , указав, что работает вызов метода jQuery.datepicker() . Но при щелчке поля, я не вижу, как всплывает дата.

Согласно предложению @ dfsq, вот скрипка. Он приближается к исходному коду: http://jsfiddle.net/35kgsjxk/

Вам не хватает открывающего тега div в inputfield-loader.php , что может вызвать проблему сокрытия некоторых элементов.

Если вы используете правильные заголовки и тип данных в $.ajax он должен работать так, как он работает: http://jsfiddle.net/96d8k2m3/