Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You're re-updating your HTML, thus a new DOM essentially each time you login/logout with your single screen application. jQuery will only find the <em>first loaded</em> instance of the DOM with your current selectors. Adjust them to look for the newly appended (Container) DOM Element <em>each</em> time.</p> <h2>Applying <code>.datepicker()</code> to an dynamically assigned <code>&lt;div&gt;</code></h2> <pre><code>var $datePickerEl = $(document).find('#fecha', $contenedor ); $(document).on('click', "#fecha", function(){ if( $datePickerEl.val() == ''){ $datePickerEl.datepicker('setDate', (new Date())); } }); </code></pre> <h2>Reassigning <code>.datepicker()</code> to same dynamically created DOM Element</h2> <p>Following your example you provided in your <a href="http://jsfiddle.net/L6s8U/2" rel="nofollow">fiddle</a>, which reloaded the contents of the DOM with a page of information, posed a problem that it was not re-starting the <code>.datepicker()</code> initialisation as expected. </p> <p>It because the new <code>.html()</code> reload was wiping out all the <code>.datepicker()</code> helper CSS &amp; <code>&lt;div&gt;</code>s, but <em>was</em> assigning the element with a new ID. By simply appending the content to a container, rather than the entire document <strong>and</strong> removing any instance of the ID and class that remained in the previous instance of the <code>datepicker()</code> the example code below successfully creates a new <code>.datepicker()</code> on demand.</p> <pre><code>&lt;div id="content"&gt;&lt;/div&gt; &lt;script&gt; function loadLogin() { $('#content').html('&lt;div id="pp"&gt;'+ '&lt;button id="login"&gt;Free login&lt;/button&gt;'+ '&lt;/div&gt;').trigger("create"); loadEvents(); } function loadEvents() { $div = $('&lt;h1&gt;Hi!!&lt;/h1&gt;' + '&lt;input type="text" class="datepick" /&gt;' + '&lt;button id="logout" style="margin-top: 100px;"&gt;Good bye!&lt;/button&gt;'); $("#pp").html($div).trigger("create"); /** * Find the newly appended .datepick * &amp;&amp; begin the .datepicker init. **/ $datepicker = $(document).find('.datepick'); $datepicker.datepicker(); $('#logout').click(function () { //Remove the attached id &amp;&amp; class. $datepicker.removeAttr('id').removeClass('hasDatepicker'); loadLogin(); }); } &lt;/script&gt; </code></pre> <p><strong>Demo Fiddle</strong>: <a href="http://jsfiddle.net/zP9L6/1/" rel="nofollow">http://jsfiddle.net/zP9L6/1/</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload