Hello, dear experts! Help, please, in solving, I am sure a very simple question for you.

  1. There is a text box in which to the left is an add icon. When clicked, the next text field is added below with the delete icon, etc. To do this, use the first js with this code.

    $(document).ready(function(){ var maxField = 10; //Input fields increment limitation var addButton = $('.add_button'); //Add button selector var wrapper = $('.field_wrapper'); //Input field wrapper var fieldHTML = '<input type="text" name="" class="data_picker" value="" />'; //New input field html var x = 1; //Initial field counter is 1 $(addButton).click(function(){ //Once add button is clicked if(x < maxField){ //Check maximum number of input fields x++; //Increment field counter $(wrapper).append(fieldHTML); // Add field html } }); $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked e.preventDefault(); $(this).parent('div').remove(); //Remove field html x--; //Decrement field counter }); });

  2. Inside the var fieldHTML input with the data_picker class. This is the class that js uses to enter time. Here is the code.

     $(function(){ $('.data_picker').timepicker().each(function(i){ eval($(this).text()); }); });

The question is that if you just use the .time_picker class in plain html, everything works fine. But when I put it in js, which adds fields, it doesn't work. Please tell me how to make the second js work when adding fields. I really need your help. Thank you very much in advance.

  • one
    so what code doesn't work then? - Grundy
  • Hello. Individually, both work. But I need to put the second one in the first one. So that when adding a field, the second code worked, which now does not want to work. - Mesh
  • Then what is the question? :-) - Grundy
  • Corrected on top. I apologize for the first time asking a question here. - Mesh
  • Although yes, the obvious problem is that you just need to call the timepicker () after adding the element - Grundy

1 answer 1

The problem is solved by calling timepicker () - before adding

 $(addButton).click(function(){ //Once add button is clicked if(x < maxField){ //Check maximum number of input fields x++; //Increment field counter var f = $(fieldHTML).timepicker().each(function(i){ eval($(this).text()); }); $(wrapper).append(f); // Add field html } });

either after

 $(addButton).click(function(){ //Once add button is clicked if(x < maxField){ //Check maximum number of input fields x++; //Increment field counter var f = $(fieldHTML); $(wrapper).append(f); // Add field html f.timepicker().each(function(i){ eval($(this).text()); }) } });
  • Now I fixed the first code according to your instructions. If understood correctly. Look here please. But now the new line has ceased to be added. - Mesh
  • @Mesh, which string has stopped being added? in this case, your answer should be deleted, since it is not an answer and, as a last resort, you can add the code to the question itself by editing it by pressing the edit question button - Grundy
  • Got it. Excuse me. The first js is used to add these same fields. On the left, the plus icon click on it and the box below is added. In this field, I want to use the second js with the time_picker class. That is, I add a field and time_picker should be used inside each field. Now the first js has stopped adding fields. - Mesh
  • @Mesh, you do not finish speaking something: there is not a single mention of the class time_picker in the above code. and the only thing that has changed is that now initialization occurs for each input separately when added - Grundy
  • <input type = "text" name = "" class = "data_picker" value = "" /> - Mesh