How to append divs on click using jquery?

Question

I want to append divs again and again inside my container if Add is clicked. This code is adding only one div then it doesn't append new div.

html

   <div id="mydiv">
     <div class="col-8 form-group"><label for="">Date</label>
    <input class="form-control" type="date" />
    <p class="add"> Add</strong></p>
    </div>
   </div>

jquery

 $(".add").on("click", function() {
       $('#mydiv').append(` <div class="col-8 form-group"><label for="">Date</label>
                          <input class="form-control" type="date" />
                         <p class="add"> Add</strong></p>
                        </div>`)
    });

where is mydiv in your html example where you want to append more div ? — Amit Verma, Jul 17 '21 at 11:59

Devsi Odedra · Accepted Answer · 2021-07-17T12:13:02.087

1

When need to trigger action on dynamic added html, You need to use on() $(document).on('click','.add',function() {

$(document).on('click','.add',function() {

    var isValid = true;
    $("input").each(function() {
       var element = $(this);
       if (element.val() == "") {
           isValid = false;
       }
    });
    if(isValid){
        $('#mydiv').append(` <div class="col-8 form-group"><label for="">Date</label>
                          <input class="form-control" type="date" />
                         <p class="add"> Add</strong></p>
                        </div>`);
    }
       
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mydiv">
     <div class="col-8 form-group"><label for="">Date</label>
    <input class="form-control" type="date" name="date" />
    <p class="add"> Add</strong></p>
    </div>
   </div>

edited Jul 17 '21 at 12:13

answered Jul 17 '21 at 12:02

Devsi Odedra

5,244
1
23
37

I want to add little change can you help on this ? I want to add required on the input and only if user input value of date then new div would be added like this on click `Add` – D_P Jul 17 '21 at 12:08
yes, just need to check value of latest date – Devsi Odedra Jul 17 '21 at 12:10
1

@D_P check the updated answer – Devsi Odedra Jul 17 '21 at 12:13

Andy · Answer 2 · 2021-07-17T12:26:43.537

The reason is that you're adding new add class links to the document after it has initially loaded, but because you've only targeted the first add in your code jQuery isn't listening to them.

You need to use event delegation to place the listener on a parent element that then captures to the events that bubble up the DOM.

$(document).on('click', '.add', function() {
  $('#mydiv').append('<div><label>Date</label><input type="date" /><p class="add">Add</strong></p></div>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><label>Date</label>
  <input type="date" />
  <p class="add">Add</strong>
  </p>
</div>
<div id="mydiv"/>

score 0 · Answer 3 · answered Jul 17 '21 at 12:06

Problem is your dynamically added elements are not having the event listener. You can use the below code, which is similar to yours. When you add a new element, add an eventListener to the last element selected by the selector .add. This ensures that every new element has the evenListener.

let callFunction =()=>{
       $('#mydiv').append(` <div class="col-8 form-group"><label for="">Date</label>
<input class="form-control" type="date" />
<p class="add"> Add</strong></p>
</div>`);  
}

$(".add").on("click", function() {
 callFunction();   
 $(".add").last().on("click",function(){
   callFunction();
 });
});

Codepen

How to append divs on click using jquery?

3 Answers3