僅附加新選定的復選框，不附加先前的復選框

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