JQuery datepicker not working with dynamic HTML

I have asked this question before and also here . However, none of the suggested answers worked. After a few days, the problem is still not resolved. So I ask again, with a few more details, to see if anyone can help me fix the problem.

I have an input field that is created via Ajax from the server side and inserted into the current page. My problem is the jQuery date picker doesn't work on the input field when it is created via Ajax, but it does work when the field is directly placed on the page.

Below is a shortened version of my code.

HTML code:

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

      

        
        
        
      

    

And here is the jQuery code that should activate the datepicker on it.

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

      

        
        
        
      

    

And here 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>

      

        
        
        
      

    

Everything works fine if the input field is just encoded on the page. But when inserted into the DOM as the return string of an Ajax call, the date picker no longer works. However, when I use Chrome to validate the field datefield

, I see that it added the jQuery datepicker class to it hasDatepicker

, indicating that the method call was jQuery.datepicker()

working. But when I click the field, I don't see the date picker popup.

As suggested by @dfsq, here is a fiddle. It gets closer to the original code: http://jsfiddle.net/35kgsjxk/