Javascript function not working when the event is called by element from another function

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!

I think this has nothing to do with creating the element from JavaScript. I think the problem is that you are creating the element after $( ".datepicker" ).datepicker(); has already been called. Maybe you could try calling it again right after creating the input element? — JLRishe
– JLRishe, Commented Jun 15, 2013 at 6:58
@JLRishe great. It's works fine now. I now called $( ".datepicker" ).datepicker(); after creating the elemet. Thank you so much — Ivo San
– Ivo San, Commented Jun 15, 2013 at 7:03

dcarson · Accepted Answer · 2013-06-15 07:05:22Z

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

edited Jun 15, 2013 at 7:05

answered Jun 15, 2013 at 6:58

dcarson

2,8531 gold badge27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Greendrake Over a year ago

Why to do global ".datepicker" match again? It will be enough to match the added element only to call datepicker() on it.

dcarson Over a year ago

Good point DrakeES, I just used the jQuery selector that was originally used to be consistent, however you can see in my preferred answer I have provided for using any selector by passing it as a parameter.

Collectives™ on Stack Overflow

Javascript function not working when the event is called by element from another function

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related