0

this is driving me nuts.

Here is jfiddle showing situation:

https://jsfiddle.net/mao2je6k/

I am trying to dynamically add date-time input fields. I am using flatpickr for the date-time choosing.

Seems like no matter what I do, only the first click(function() is triggered. So, the remove click is not triggering, and nor is flatpickr being triggered on a click of the input field.

I have a feeling it is a jQuery conflict issue, but just don't know how I am supposed to alter this so that all functionality works with one another.

Everything is in the jfiddle, but here is the HTML and JS:

<div id="meta_inner">
    <span id="here"></span>
    <span class="add">Add Group</span>
</div>

$(document).ready(function () {
    var count = 1;

    $(".add").click(function() {
       count = count + 1;
       $('#here').append('<p> Group Name <input type="text" name="groups['+count+'][post_title]" value="" /> -- Start Date : <input id="datetime_'+count+'" type="text" name="groups['+count+'][startdate]" value="" /><span class="remove">Remove Group</span><input type="hidden" name="groups['+count+'][object_id]" value="" /></p>' );
       return false;
     });

     $("#here").on('click', '.remove', function() {
          $(this).parent().remove();
     });

      var config =  {
                    enableTime: true,
                    dateFormat: "Y-m-d H:i",
                    minDate: "today",
                    maxDate: new Date().fp_incr(365)
      };

      $("#here").on('click', '[id *="datetime_"]', function() {
          $(this).flatpickr(config);
     });

});

Edit:

Based on linked post in comments, modified the jQuery (modified version shown above).

Now things are almost working, but when I click the date field, the flatpickr calendar pops up and immediately closes.

Current fiddle is https://jsfiddle.net/mao2je6k/1/

Any idea what is causing that?

Brian
  • 561
  • 5
  • 16
  • Thanks - almost solves the problem! I now have the dynamic fields binded correctly (well, based on what I gathered from the link you provided), just that the flatpickr calendar pops up and immediately closes, so something a bit odd going on. – Brian Dec 12 '19 at 12:25

1 Answers1

1

this problem is occurs when you try to add listener o the elements that are not in the Dom yet.

you add listener on the element for removing it but that element attached to DOM after click on add button.

you need to add listener on the parent. you can read more about it in ".live() - .delegate() .on()" methods of jQuery.

here your answer: ** https://jsfiddle.net/wgz8pn3b/23/ **

Amir Rezvani
  • 1,262
  • 11
  • 34
  • Digesting your fiddle. What I am actually trying to do with the "Add Group" is to add a new row each time. So, for instance, I hit "add Group" it shows me a row where I enter name, date. Then I hit "Add Group" again and it adds a new blank line where I can add another group name and date. – Brian Dec 12 '19 at 13:11
  • i insert an updated link to my answer. and it is working like your example and show you what you need to do. just look how i code the removing action – Amir Rezvani Dec 12 '19 at 13:28
  • Hi, thanks. Intended behavior is the "add" button just add another input row. So first there is nothing except button. Then user clicks button and they see row to enter name and date. When they click "Add" that just adds a new row, and they can then enter another name and date. So each added group row stays where it is, and the Add button just keeps adding rows. That way I can edit the groups before saving the page. Though your approach works fine if I just make sure to set name and date once and know that I set how I wanted. But having all input rows stay visible is good for fixing mistakes. – Brian Dec 12 '19 at 14:11
  • 1
    Sure, and you need to know when user click on the add button you attached the button.remove to the DOM but before that you attached the listener to button.remove and that's won't work because there is no button.remove in DOM yet. so you attach the listener to the parent so each time parent updated jQuery will be aware of new elements that are kicked in. – Amir Rezvani Dec 12 '19 at 14:19
  • Thanks for walking me through this! Now I can get everything squared away. – Brian Dec 12 '19 at 19:37
  • now i'm happy for you and myself. :-) – Amir Rezvani Dec 13 '19 at 08:30