仅附加新选定的复选框，不附加先前的复选框

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 ? 嗨，我的问题是我有一个表，我添加了用户输入的内容，当添加了新的tr时，添加了新的复选框，事情是当我标记该复选框并按显示结果时出现，但是当我按另一个复选框时先前的复选框和新的复选框出现，如何只附加我标记的复选框？ Here's my code: 这是我的代码：

Updated Jquery: 更新的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: 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>

Answer 1

The problem is because you are declaring your "click" event again, every time a value is entered into the textbox. 问题是因为每当在文本框中输入一个值时，您就再次声明“ click”事件。 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). 因此，如果输入2个值， textval处理2个单击事件，每个事件的textval值不同（取决于声明事件时的textval值）。 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. 如果添加3个复选框，则会发生相同的情况，该事件将运行3次。 Same if you add 100. 如果加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. 解决方案是只声明一次click事件-因为您已经正确使用了委托事件语法，所以它将处理随后创建的所有复选框上的事件。 You also need to disconnect it from textval - since that only represents the value of the textbox last time it was updated. 您还需要将其与textval断开连接-因为该值仅表示上一次更新时该文本框的值。 Instead I have used a span round the text you need, with a class to identify it. 取而代之的是，我在所需的文本周围使用了span ，并用一个类来标识它。 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. 最后，我做了一个小小的更改，以使$(this)仅被调用一次以标识当前复选框，并被分配给一个变量-反复调用jQuery构造函数（相对）很昂贵，而且浪费资源。

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");
  });
});

仅附加新选定的复选框，不附加先前的复选框

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-01-06 16:56:41

仅附加新选定的复选框，不附加先前的复选框

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-01-06 16:56:41

解决方案1
0 已采纳 2017-01-06 16:56:41