我正在尝试创建一个简单的类似 reddit 的系统，用户可以在其中添加帖子，然后与投票系统(与表单一起粘贴)进行交互。
虽然我使用了事件委托(delegate)，但它似乎只影响我的第一个新创建的元素。因此，在第一个新创建的元素上，投票系统起作用。
然而，对于后者，似乎发生的是事件确实被附加，但它更新了第一个投票系统(每个帖子都附加了一个小投票系统)。
感谢任何帮助!谢谢。
$("#subbtn").on("click", function(event){
event.preventDefault();
var postTitle = $("#title").val(),
postBody = $("#content").val();
$("#title").val("");
$("#content").val("");
var html = "<div class='wrapper'><div class='panel panel-default'><p class='button' id='plus'>+</p><p id='count'>0</p><p class='button' id='minus'>-</p><h3>'" + postTitle + "</h3><p>" + postBody + "</p></div></div>";
$("body").append(html);
});
var counter = 0;
$(document).on("click", "#plus", function() {
counter++;
$("#count").text(counter);
});
$(document).on("click","#minus", function() {
counter--;
$("#count").text(counter);
});
我的 HTML 是:
<body>
<div class="panel panel-default" id="formStuff">
<div class="form-group">
<label for="title">Title </label> </label>
<input type="title" id="title" class="form-control">
</div>
<div class="form-group">
<label for="content">Content </label>
<textArea rows="5" type="content" id="content" class="form-control"></textArea>
</div>
<input type="submit" class="btn btn-success" id="subbtn">
</div>
</body>
最佳答案
您正在添加多个具有相同 ID 加、计数和减的投票系统。但 Id 应该是唯一的。相反，使用具有相同类的类，并使选择器在这些类上工作。请检查下面的代码片段以获取更多理解。
$("#subbtn").on("click", function(event){
event.preventDefault();
var postTitle = $("#title").val(),
postBody = $("#content").val();
$("#title").val("");
$("#content").val("");
var html = "<div class='wrapper'><div class='panel panel-default'><p class='button plus'>+</p><p class='count'>0</p><p class='button minus'>-</p><h3>'" + postTitle + "</h3><p>" + postBody + "</p></div></div>";
$("body").append(html);
});
$(document).on("click", ".plus", function() {
var counter = $(this).siblings(".count").text();
counter++;
$(this).siblings(".count").text(counter);
});
$(document).on("click",".minus", function() {
counter--;
var counter = $(this).siblings(".count").text();
counter--;
$(this).siblings(".count").text(counter);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default" id="formStuff">
<div class="form-group">
<label for="title">Title </label> </label>
<input type="title" id="title" class="form-control">
</div>
<div class="form-group">
<label for="content">Content </label>
<textArea rows="5" type="content" id="content" class="form-control"></textArea>
</div>
<input type="submit" class="btn btn-success" id="subbtn" />
</div>关于javascript - jQuery - 事件委托(delegate)仅针对第一个新创建的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39328855/