Dynamic DOM creation issue

Question

Function doesnot get attached with newly created input box. Please check my code on this link

[Please check this code][1]

$("#datepicker").datepicker();


$("button").click(function(){
  
  $(".add").html('<input id="datepicker" placeholder="click here to open calendar " type="text" />');
  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='add'><input id="datepicker" placeholder="click here to open calendar " type="text" /></div>
<button>Add input again </button>

depen.io/anon/pen/adLzi

Please include the relevant (MCVE)code here, in your question. Don't expect people to follow links around the internet in order to help. — David Thomas
– David Thomas, Commented Sep 30, 2014 at 10:06

shash7 · Accepted Answer · 2014-09-30 13:49:10Z

1

When you are clicking on the button, this is the code which is being executed :

$("button").click(function(){
    $(".add").html('<input id="datepicker" placeholder="click here to open calendar " type="text"   />');
});

What this does is that is replaces the datepicker with a new one. Nothing wrong except that the event attached has a problem reattaching it.

TL:DR, use this code :

$("button").click(function(){
   var el = $('#datepicker');
  $.datepicker._clearDate(el);
});

Edit

Even I don't know the exact reasons why this happens but this is probably because internally, jquery UI has no link of the previous DOM element and it is left hanging. This also leads to memory leaks.

edited Sep 30, 2014 at 13:49

answered Sep 30, 2014 at 10:09

shash7

1,7481 gold badge18 silver badges20 bronze badges

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

Comments

Sadikhasan · Accepted Answer · 2014-09-30 10:06:59Z

0

Try this

$("button").click(function(){
  $("#datepicker").val("");
  $("#datepicker").focus();
});

Demo

answered Sep 30, 2014 at 10:06

Sadikhasan

18.6k23 gold badges84 silver badges126 bronze badges

Comments

easywaru · Accepted Answer · 2014-09-30 10:09:10Z

0

$("button").click(function(){

   $(".add").html('<input id="datepicker" placeholder="click here to open calendar " type="text" />');

   // move to here your cod
   $("#datepicker").datepicker();

});

$(".add").html(...) means delete and create new DOM object

then lost meaning $("#datepicker").datepicker();

edited Sep 30, 2014 at 10:09

answered Sep 30, 2014 at 10:03

easywaru

1,1539 silver badges17 bronze badges

2 Comments

Vis Over a year ago

I have to replace content.Not append.

Vis Over a year ago

Thats ok..but why This function is not getting attached with InputBox we added using javascript?

MortenF · Accepted Answer · 2014-09-30 10:32:25Z

0

Try to move the plugin init into your document.ready function:

$(document).ready(function() {
$("#datepicker").datepicker();`
});

$("button").click(function(){
  
  $(".add").html('<input id="datepicker" placeholder="click here to open calendar " type="text" />');
  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='add'><input id="datepicker" placeholder="click here to open calendar " type="text" /></div>
<button>Add input again </button>

answered Sep 30, 2014 at 10:32

MortenF

1152 silver badges6 bronze badges

Collectives™ on Stack Overflow

Dynamic DOM creation issue

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related