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点击。我想在距离 .adddate 按钮的最近的 .datesaccordion div中插入DHTML。但是jquery代码 （上面提到的）无效。

任何人都可以告诉我我错过了什么？

Answer 1

应该是

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

演示：Fiddle

datesaccordion元素不是按钮的祖先，它是按钮父级的下一个兄弟的指示符，所以你不能在这里使用.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"));
}

为什么这个jquery代码不起作用

2 个答案: