Appending only the new selected checkbox not the previouse one
Question
Hi so my issue is that i have a table and I add what the user is typing and when a new tr is added a new checkbox is added the thing is when i mark the checkbox and press show result it appears but when i press another checkbox the previouse checkbox and the new checkbox appears How can i append only the checkbox that i'm marking ? Here's my code:
Updated Jquery:
$(document).ready(function(){
$(".btn-default").on("click",function(){
var textval = $('.form-control').val();
$('.list').append("<tr class='tabletr'><td>"+"<input type='checkbox' class='check'/> " + textval + "<br />"+"</tr></td>");
$('body').on("click", ".check" , function() {
var $this = $(this);
var textcopy = textval;
if( $this.prop('checked')){
$(".showCompleted").append("<tr><td>"+textcopy+"</td></tr>");
$(this).closest('.tabletr').remove();
textval="";
}
});
});
$(".btn-info").on("click",function(){
$(".completed").removeClass("hide");
})
});
HTML:
<body>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="Insert your to do...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Add!</button>
</span>
</div><!-- /input-group -->
<button class="btn-info">Show Completed</button>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">To do List</h3>
</div>
<div class="panel-body">
<table class="table table-striped list">
</table>
</div>
</div>
<div class="panel panel-default completed hide">
<div class="panel-heading">
<h3 class="panel-title">Completed</h3>
</div>
<div class="panel-body">
<table class="table table-striped showCompleted">
</table>
</div>
</div>
</div><!-- /.col-lg-6 -->
<div class="col-md-2"></div>
</div>
</body>
1 answers
solution1
0 ACCPTED 2017-01-06 16:56:41
The problem is because you are declaring your "click" event again, every time a value is entered into the textbox. Therefore, if you enter 2 values, there are 2 click events to be handled, each with a different value of textval (depending on what textval was when the event was declared). So if you create two checkboxes and then click on one of them (doesn't matter which) it will run the event twice and print both values. The same thing will happen if you add 3 checkboxes, the event would then run 3 times. Same if you add 100.
The solution is to only declare the click event once - because you've correctly used the delegated event syntax, it will handle events on all the checkboxes subsequently created. You also need to disconnect it from textval - since that only represents the value of the textbox last time it was updated. Instead I have used a span round the text you need, with a class to identify it. Lastly I've made a small change so that $(this) is only called once to identify the current checkbox, and assigned to a variable - calling the jQuery constructor repeatedly is (relatively) expensive and a waste of resources.
Solution as follows:
$(document).ready(function() {
$(".btn-default").on("click",function(){
var textval = $('.form-control').val();
$('.list').append("<tr class='tabletr'><td>"+"<input type='checkbox' class='check'/><span class='textval'>" + textval + "</span><br />"+"</tr></td>");
});
$('body').on("click", ".check" , function() {
var cbox = $(this);
var textcopy = cbox.next('.textval').text();
if(cbox.prop('checked') == true){
$(".showCompleted").append("<tr><td>"+textcopy+"</td></tr>");
cbox.closest('.tabletr').remove();
textval="";
}
});
$(".btn-info").on("click",function(){
$(".completed").removeClass("hide");
});
});
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.