Datepicker在Ajax加载的div中不起作用

Question

I have a div which is populated by ajax. When done this way the datepicker is not called. I originally had the datepicker loaded in the header of the containing page but have tgried loading it within the script which calls the div content but again no luck. The Jquery library is called in the header of the main page. If I load the pages without ajax then there is no problem and the datepicker works fine.

<li><a data-target="#halloffame" href="abscencerecords.php">Absence Records</a></li>
<li><a data-target="#halloffame" href="abscencerequestform.php">Absence Request</a></li>
<li><a data-target="#halloffame" href="personaldetails.php">Personal Details</a></li>
        <?php endif ?>
        <?php endif ?>
        </ul></div>
        <div class="clear padding20"></div>
<div id="halloffame" class="bordered_box"></div>
        <script>
  $('[data-target]').click( function (e) {
   $(document).ready(function() { $("#datepicker").datepicker({ dateFormat: 'dd/mm/yy' }); }); 
   $(document).ready(function() { $(".datepickermultiple").multiDatesPicker({ dateFormat: 'dd/mm/yy' }); });
    var target = $($(this).attr('data-target')); 
   target.load($(this).attr('href'));
    e.preventDefault(); // prevent anchor from changing window.location
  });
</script>

Answer 1

Most plugins only initialize for elements that exist ... at the time the code is run

In order to initialize a plugin within ajax loaded content you need to do that within the completion callback of ajax.

Try changing :

target.load($(this).attr('href'));

To

target.load($(this).attr('href'), function(){
    // new html now exists , initialize plugins or event handlers or dom manipulation here
    $(this).find(selector).somePlugin()
});

Reference load() docs

Answer 2

In my case datepicker plugin was getting initialize, but the issue was position of datepicker calendar, I solved it by adding below CSS to the page:

#ui-datepicker-div {
    position: absolute !important;;
}