如何使用jquery在单击时追加div？

Question

如果单击Add，我希望在容器中一次又一次地追加div。此代码只添加一个div，然后不追加新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>`)
    });

Answer 1

当需要在动态添加的html上触发操作时，需要在() $(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>

​

Answer 2

原因是在文档最初加载之后添加了新的add类链接，但是因为您只针对代码中的第一个add，所以jQuery没有监听它们。

您需要使用事件委托将侦听器放置在父元素上，然后捕捉到使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"/>

​

Answer 3

问题是动态添加的元素没有事件侦听器。您可以使用下面的代码，类似于您的代码。添加新元素时，将eventListener添加到选择器.add选择的最后一个元素。这确保了每个新元素都有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();
 });
});

科德芬