爲什麼這個jQuery代碼不工作

Question

我有以下代碼

HTML標記

<div> 
    <div class="col-md-6"> 
     <button type="button" class="adddate">Add Date</button> 
    </div> 
    <div class="col-md-12 form-group"> 
     <div class="datesaccordion panel-group"> 

     </div> 
    </div> 
</div> 

<div> 
    <div class="col-md-6"> 
     <button type="button" class="adddate">Add Date</button> 
    </div> 
    <div class="col-md-12 form-group"> 
     <div class="datesaccordion panel-group"> 

     </div> 
    </div> 
</div> 

<div> 
    <div class="col-md-6"> 
     <button type="button" class="adddate">Add Date</button> 
    </div> 
    <div class="col-md-12 form-group"> 
     <div class="datesaccordion panel-group"> 

     </div> 
    </div> 
</div> 

jQuery代碼

$(document.body).on("click", ".adddate", addDate);  
function addDate(e) { 
    $(e.target).closest(".datesaccordion").append($("<p />").html("test")); 
} 

我在這裏試圖插入DHTML上。更新按鈕點擊。並且我想要在距離最近的.datesacordordion div從。更新按鈕中插入DHTML。但jquery代碼 （上面提到）不起作用。

任何人都可以告訴我我失蹤了什麼？

Answer 1

應該

$(document).on("click", ".adddate", addDate); 
function addDate(e) { 
    $(this).parent().next().find(".datesaccordion").append($("<p />").html("test")); 
} 

演示：Fiddle

的datesaccordion元素沒有按鈕的祖先，它是按鈕的父級的下一個兄弟的descdendant，所以你不能使用.closest()這裏

Answer 2

嘗試：

$(document).on("click", ".adddate", addDate); 

而不是

：

$(document.body).on("click", ".adddate", addDate); 

以及改變你的addDate()功能如下：

function addDate(e) { 
    $(this).parent().siblings('.col-md-12').find('.datesaccordion').append($("<p />").html("test")); 
}