当事件被另一个函数的元素调用时，JavaScript函数不起作用

Question

I've downloaded a calendar script, that when the input element is click a calendar will popup.

<script language="JavaScript">
  $(function() {
        $( ".datepicker" ).datepicker();                
  });   
</script>

<input class='datepicker' />

The above code works fine.

But when the element is coming from a javascript...

<script language="JavaScript">
function showElement()
{
    $('#mydiv').html("<input class='datepicker' />");

}
</script>

<div id='mydiv'></div>

The calendar don't shows up as the input is clicked. I think there is no error in the downloaded script. I think I need to do something to make this calendar appears even if the element is created by a javascript. What should I modify? Thanks!

Answer 1

Change your function to:

function showElement()
{
    $('#mydiv').html("<input class='datepicker' />");
    $( ".datepicker" ).datepicker();

}

Or even better, do the following:

function showDatePicker(selector) {
    $(selector).datepicker();
}

function showElement()
{
    $('#mydiv').html("<input class='datepicker' />");
    showDatePicker(".datepicker");
}

This way you can show the date picker whenever you want by calling the showDatePicker() function for any element that matches the selector you pass as a parameter to the function. Of course in your case you would only want to call it after you have called the showElement() function