jQuery - Event delegation only targeting first newly-created element
Question
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).
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:
<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 answers
solution1
2 ACCPTED 2016-09-05 10:59:04
You are adding multiple voting systems with same IDs plus,count and minus. But Ids should be unique. 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>
solution2
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.