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

Question

嗨，我的问题是我有一个表，我添加了用户输入的内容，当添加了新的tr时，添加了新的复选框，事情是当我标记该复选框并按显示结果时出现，但是当我按另一个复选框时先前的复选框和新的复选框出现，如何只附加我标记的复选框？ 这是我的代码：

更新的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>

Answer 1

问题是因为每当在文本框中输入一个值时，您就再次声明“ click”事件。 因此，如果输入2个值， textval处理2个单击事件，每个事件的textval值不同（取决于声明事件时的textval值）。 因此，如果您创建了两个复选框，然后单击其中一个（无关紧要），它将运行该事件两次并打印两个值。 如果添加3个复选框，则会发生相同的情况，该事件将运行3次。 如果加100，则相同。

解决方案是只声明一次click事件-因为您已经正确使用了委托事件语法，所以它将处理随后创建的所有复选框上的事件。 您还需要将其与textval断开连接-因为该值仅表示上一次更新时该文本框的值。 取而代之的是，我在所需的文本周围使用了span ，并用一个类来标识它。 最后，我做了一个小小的更改，以使$(this)仅被调用一次以标识当前复选框，并被分配给一个变量-反复调用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'/><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