javascript - 为什么这个 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"));
}

在这里，我尝试在 .adddate 按钮单击上插入 DHTML。我想将 DHTML 插入到距离 .adddate 按钮最近的 .datesaccordion div 中。但是jquery代码(上面提到的)不起作用。

有人可以告诉我我错过了什么吗？

Answer 1

应该是

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

演示:Fiddle

datesaccordion元素不是按钮的祖先，它是按钮父级的下一个兄弟的后代，因此您不能使用 .closest()这里