Javascript 为什么jquery代码不起作用

我有以下代码

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"));
}

$（document.body）.on（“单击“，”.adddate”，adddate）；
函数addDate（e）{
$（e.target）.latest（.datesaccordion”）.append（$（“
”）.html（“test”）；
}

在这里，我尝试在上插入DHTML。单击adddate按钮。我想在最近的.datesCordion div from.adddate按钮中插入DHTML。但是jquery代码 （上述）不起作用

谁能告诉我我错过了什么

应该是

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

$（文档）。在（“单击“，”.adddate”，adddate）；
函数addDate（e）{
$（this.parent（）.next（）.find（“.datesacordion”）.append（$（“
”）.html（“test”）；
}

演示：

datesaccordion

元素不是按钮的祖先，它是按钮父级的下一个同级的描述，因此不能在此处使用

请尝试：

$(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"));
}

函数addDate（e）{
$（this）.parent（）.sides（'.col-md-12'）。find（'.datesaccordion'）。append（$（“
”）.html（“test”）；
}

什么是

？这有效吗？@Mr.Alien它正在向

datesacordion

元素添加一个新的

p

元素。

$（“
”）语法创建了一个新的
p
元素，而不是执行dom查找
e.target
应该是
this
，并且
.datesaccordion
不是按钮的祖先，因此它当然不会被拾取