我有以下代码
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代码 (上面提到的)不起作用。
有人可以告诉我我错过了什么吗?
最佳答案
应该是
$(document).on("click", ".adddate", addDate);
function addDate(e) {
$(this).parent().next().find(".datesaccordion").append($("<p />").html("test"));
}
演示:Fiddle
datesaccordion
元素不是按钮的祖先,它是按钮父级的下一个兄弟的后代,因此您不能使用 .closest()这里
关于javascript - 为什么这个 jquery 代码不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21038799/