{"id":497,"date":"2012-01-04T22:37:58","date_gmt":"2012-01-04T22:37:58","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=497"},"modified":"2012-01-04T22:37:58","modified_gmt":"2012-01-04T22:37:58","slug":"jquery-datepicker-work-cloned-elements","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/jquery-datepicker-work-cloned-elements\/","title":{"rendered":"jQuery Datepicker doesn&#8217;t work on cloned elements"},"content":{"rendered":"<p>I tabled this issue for a while, trying not to spend too much time on it. But, it came back to haunt me in another project.<\/p>\n<p>If you attempt to clone an element with jQuery&#39;s clone() method, you&#39;ll find that you are unable to apply a Datepicker() to the element.<\/p>\n<p>The reason is, when you clone an element, you also clone it&#39;s class attribute. In the case of a Datepicker element, that class is &quot;hasDatepicker&quot;.<\/p>\n<p><code>&lt;<span class=\"start-tag\">input<\/span><span class=\"attribute-name\"> class<\/span>=<span class=\"attribute-value\">&quot;hasDatepicker&quot; <\/span><span class=\"attribute-name\">name<\/span>=<span class=\"attribute-value\">... \/&gt;<\/span><\/code><\/p>\n<p><span class=\"attribute-value\">When the Datepicker method is called on an element, it first checks to see if that element already has the hasDatepicker class.<\/span><\/p>\n<p><span class=\"attribute-value\">So, we need to remove this class before applying the Datepicker method, i.e.<\/span><\/p>\n<p><code><span class=\"attribute-value\">$(this).removeClass(&#39;hasDatepicker&#39;).datepicker();<\/span><br \/>\n\t<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I tabled this issue for a while, trying not to spend too much time on it. But, it came back to haunt me in another&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[77,5],"tags":[152],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/497"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=497"}],"version-history":[{"count":1,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/497\/revisions"}],"predecessor-version":[{"id":498,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/497\/revisions\/498"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}