Focus Event not working on Dynamically created content

Question

I was trying to initialize datePicker on dynamically added content. When i focus on datepicker, datepickerloaded but when i add a dynamic content, datePicker doesn't load for that content. Here is the code for jquery datePicker on focus code.

 $('document').on('focus',".datepicker", function(){
    $(this).datepicker({ dateFormat: 'yy-mm-dd' });
});

HTML Part:

<div class="row" style="align-items: center;">
     <div class="col-md-10 dynamic-field" id="dynamic-field-1">
          <div class="row" >
               <div class="col-md-3">
                        <div class="form-group">
                                <label for="field" class="hidden-md">Type Of Cultivation*</label>
                                <input type="text" id="field" class="form-control" name="type_of_cultivation[]" />
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="field" class="hidden-md">Cultivation Date</label>
                                <input type="text"  class="form-control datepicker" placeholder="2023-02-28" name="cultivation_date[]" />
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Harvest Date</label>
                                <input type="text"  class="form-control datepicker" placeholder="2023-03-28" name="harvest_date[]">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Quantity</label>
                                <input type="text" class="form-control"  name="quantity[]">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 mt-30 append-buttons">
                    <div class="clearfix">
                        <button type="button" id="add-button" class="btn btn-secondary float-left text-uppercase shadow-sm"><i class="fa fa-plus fa-fw"></i>
                        </button>
                        <button type="button" id="remove-button" class="btn btn-secondary float-left text-uppercase ml-1" disabled="disabled"><i class="fa fa-minus fa-fw"></i>
                        </button>
                    </div>
                </div>
            </div>

Maybe you've inserted the dynamic part outside of the `.datepicker` element?. Make also sure there's no transparent overlaying elements over the dynamically created elements. — Teemu, Feb 03 '23 at 12:45
I normally would fix this by putting the event listener on ajax success. Just put this ` $('document').on('focus',".datepicker", function(){ $(this).datepicker({ dateFormat: 'yy-mm-dd' }); });` on ur success ajax callback it should work! Not the best way of solving though — Eliphas Masuka, Feb 03 '23 at 12:57
*"HTML Part"* - is that the static (loaded with page) or is that the dynamic content (loaded via ajax) - if it's not the dynamic content, then does the dynamic content include the `datepicker` class on inputs? — freedomn-m, Feb 03 '23 at 14:11
Please confirm: is your `focus` event firing? It should be. (but just the datepicker part not working). — freedomn-m, Feb 03 '23 at 14:12
"HTML Part" - is that the static (loaded with page) but when i click on add button dynamic content will load — Hola, Feb 03 '23 at 14:13
Ideally, provide an *snippet* that demonstrates the issue (doesn't need to load HTML via ajax, can just add it via js) - at the very least, please specify exactly which of the 1000s of "datepicker"s you are using. — freedomn-m, Feb 03 '23 at 14:13
You comment *"that is the static part"* (at least that's how I read it) - so what's the dynamic part (the bit that *doesn't* work) look like? No point showing us the code that *does* work. — freedomn-m, Feb 03 '23 at 14:14
I tried your code, *as provided*, and also doesn't work for the static HTML: https://jsfiddle.net/xcd2pej0/ this is because **focus event does not bubble** (to non-focusable elements) - so you cannot use it with event delegation. — freedomn-m, Feb 03 '23 at 14:27

score 0 · Answer 1 · answered Feb 03 '23 at 13:15

It appears that there is an issue with initializing the datepicker on dynamically added content. The current implementation binds the datepicker to the focus event of elements with the class .datepicker. However, this approach is not effective when new content is added dynamically, as these elements are not present in the DOM at the time the binding occurs.

To address this issue, a solution would be to manually trigger the focus event on the newly added elements after they have been added to the DOM. This can be accomplished through the use of a click handler on the #add-button element, as follows:

$('#add-button').click(function() {
    // Add dynamic content here

    // Manually trigger the focus event on newly added elements with class 
   //.datepicker
    $('.datepicker').trigger('focus');
});

I have tried with your code but when i click add button the datepicker loaded but when i click second time on same button datePicker doesn't loaded . — Hola, Feb 03 '23 at 13:42
The "normal" solution given what you've described would be to use *event delegation* - OP is already using event delegation. This would be a common question if OP wasn't already using event delegation and has an oft-linked answer: [Event Binding on Dynamically Created Elements](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Feb 03 '23 at 14:10

Focus Event not working on Dynamically created content

1 Answers1