Добавление только нового выбранного флажка не является первым

Привет, моя проблема в том, что у меня есть таблица, и я добавляю то, что вводит пользователь, и когда добавляется новый tr, добавляется новый флажок, когда я отмечаю checkbox и нажмите, чтобы показать результат, но когда я нажму еще один флажок, появится флажок previouse и новый флажок. Как я могу добавить только флажок, который я отмечаю? Вот мой код:Добавление только нового выбранного флажка не является первым

Обновлено 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>

источник

2017-01-06 Venamus

не совсем уверен, что вы имеете в виду (возможно, скриншот поможет, и показ HTML-разметку, а). Но пара вещей примечательна: 'if ($ (". Check "). Prop ('checked')) {' будет соответствовать всем элементам с классом «checked», но вернет только проверенное свойство _first_ один - см. документы для поддержки: http://api.jquery.com/prop/. Это означает, что вы не всегда проверяете правильный флажок. Я думаю, вы, вероятно, хотите настроить таргетинг на флажок, который вызвал событие click: 'if ($ (this) .prop ('checked')) {' – ADyson

Да, я alredy изменил 'if ($ (". Check ") .prop ('checked')) {'to' if ($ this.prop ('checked')) {', но когда я добавляю отмеченный флажок, он не добавляет только самую новую, которая была помечена, вместо этого добавляет новый один плюс старый – Venamus

Поделитесь некоторыми своими HTML, чтобы быть в состоянии помочь вам –

Проблема в том, что вы снова объявляете о «нажмите кнопку» событие, каждый раз, когда значение вводится в текстовое окно. Поэтому, если вы введете 2 значения, необходимо обработать 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"); 
    }); 
});

источник

2017-01-06 16:56:41 ADyson

Красивые и спасибо Мое сомнение теперь очищено. – Venamus

@Venamus это здорово, рад помочь. если ответ будет работать для вас, пожалуйста, не забывайте повышать и/или принимать его - спасибо :-) – ADyson

Добавление только нового выбранного флажка не является первым

ответ

Смежные вопросы