Jquery's datepicker doesn't work after appending document.body's innerHTML

Question

Example:

1) go to www.hotwire.com and confirm that the datepicker for check-in and check-out works

2) open up the console and type in document.body.innerHTML += ""

3) datepicker no longer works

I'm not sure why this is... if you create the element using document.create and append it using document.body.appendChild, the datepicker still works...

appendChild doesn't replace all elements on the page with new elements (resulting in lost events). — user400654
– user400654, Commented Nov 13, 2012 at 19:03

user400654 · Accepted Answer · 2012-11-14 15:19:06Z

6

When you call el.innerHTML += "", you are essentially doing el.innerHTML = "";el.innerHTML = thehtml, which causes all element data and events to be unbound. That's why plugins and javascript stops working.

edited Nov 14, 2012 at 15:19

answered Nov 13, 2012 at 19:04

user400654

95.1k16 gold badges168 silver badges188 bronze badges

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

5 Comments

Travis J Over a year ago

That is interesting with the unbinding, I have come across using innerHTML before and didn't think it removed attributes. Can you expand a little on that please?

user400654 Over a year ago

It doesn't remove attributes, it removes events bound with javascript. Your onclick="" events will still work.

Travis J Over a year ago

When you said element data I took that to mean attributes. What did you mean by element data and can you explain why it removes the bound events (not trying to nitpick, just curious).

user400654 Over a year ago

When you bind an event to an element using javascript, that event is bound to the DOM Node that represents the element. When the DOM Node is removed, the event is also removed because it is no longer needed (and because it was stored on the node).

user400654 Over a year ago

As far as additional data, i meant more along the lines of node.dataset data. I'm not sure if jQuery cleans up it's data if elements are removed with innerHTML directly, more than likely it doesn't.

Collectives™ on Stack Overflow

Jquery's datepicker doesn't work after appending document.body's innerHTML

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related