jQuery-事件委托仅针对第一个新创建的元素
[英]jQuery - Event delegation only targeting first newly-created element
问题描述
I'm trying to create a simple reddit-like system where a user can add a post and then interact with the voting system (which pastes along with the form). 
我正在尝试创建一个简单的类似于reddit的系统，用户可以在其中添加帖子，然后与投票系统（随表格一起粘贴）进行交互。
While I have utilized event delegation, it only seems to be affecting my first newly-created element. 虽然我使用了事件委托，但它似乎只影响我的第一个新创建的元素。 Thus, on the first newly-created element, the voting system works. 因此，在第一个新创建的元素上，投票系统起作用。
On the latter ones, however, what seems to happen is that the event does get attached, but it updates the first voting system (every post gets a little voting system attached to it). 但是，在后一个事件上，似乎确实发生了该事件，但它更新了第一个投票系统（每个帖子都附加了一个投票系统）。
Any help is appreciated! 任何帮助表示赞赏！ Thank you. 谢谢。
$("#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);
});
My HTML is: 我的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>
2 个解决方案
解决方案1
2 已采纳 2016-09-05 10:59:04
You are adding multiple voting systems with same IDs plus,count and minus. 您正在添加具有相同ID的加号，计数和减号的多个投票系统。 But Ids should be unique. 但是ID应该是唯一的。 Instead use classes with same classes and make the selector work on the classes. 而是使用具有相同类的类，并使选择器在这些类上工作。 Please check below snippet for more understanding. 请检查以下代码段以了解更多信息。
$("#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>
解决方案2
0 2016-09-05 10:44:23
This is happening because of the following line: 这是由于以下行而发生的：
$(document).on("click", "#plus", function() {...});
// here you are using id selector which are unique.
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.