Почему мой условный сценарий jquery работает только один раз?

Question

Я могу нажать на tr и отметьте этот флажок. Затем я могу нажать на tr второй раз, и снимет флажок. Однако, если я попытаюсь щелкнуть то же самое tr в третий раз (или больше), тогда скрипт больше не работает. Я попробовал несколько версий этого скрипта, используя prop() вместо `` attr(), но он по-прежнему демонстрирует такое же поведение. Зачем?

HTML:

<tr onclick="checkBox('ID')" id="recordID"> 
    <td> 
     <input type="checkbox" name="myRecords[]" id="myRecordsID" value="ID"> 
    </td> 
</tr> 

JQuery:

function checkBox(ID) { 
    $(document).on("click",'#record'+ID,function(){ 
     $(document).on("click",'input#myRecords'+ID,function(e){ 
      e.stopPropagation(); 
     }); 
     var ischecked = $('input#myRecords'+ID).is(":checked"); 
     if(ischecked) { 
      $('input#myRecords'+ID).removeAttr("checked"); 
     } else { 
      $('input#myRecords'+ID).attr("checked", "checked"); 
     } 
    }); 
}); 

Answer 1

Я считаю, что ваша проблема связана с двумя вещами:

1. будучи вложенными слушателей
2. постоянный ложноположительный

HTML:

<tr id="recordID"> <!-- remove the onclick, you are already listening for it --> 
    <td> 
     <input type="checkbox" name="myRecords[]" id="myRecordsID" value="ID" /> 
    </td> 
</tr> 

JQuery:

function checkBox(ID) { 
    // move this listener outside so it does not require a click to activate 
    $(document).on("click",'input#myRecords'+ID, function(e){ 
     e.stopPropagation(); 
    }); 
    $(document).on("click",'#record'+ID,function(){ 
     var ischecked = $('input#myRecords'+ID).is(":checked"); 
     if(ischecked) { 
      // use .prop, while your method will check and uncheck the box 
      // it will not work properly with jquery's .is(":checked"); 
      // eventually resulting in a permanent false positive 
      $('input#myRecords'+ID).prop('checked', false); 
     } else { 
      $('input#myRecords'+ID).prop('checked', true) 
     } 
    }); 
}; 
checkBox('ID'); // activates listeners 

http://jsfiddle.net/fresheyeball/K8L57/

---

Если бы я писал эту http://jsfiddle.net/fresheyeball/3qped/

HTML:

<tr class="record"> 
    <td> 
     <input type="checkbox" name="myRecords[]" value="ID" /> 
    </td> 
</tr> 

JQuery:

$('.record').on('click',function(){ 
    var checkBox = $(this).find('input'); 
    checkBox.prop('checked', !checkBox.prop('checked')); 
}); 

Answer 2

Существует вложенный код и интересно, если способ применить функция JQuery на() является правильной.

Это может быть упрощено к этому:

<table> 
    <tr id="recordID12" class="myRecordEntry"> 
     <td> 
      <input type="checkbox" name="myRecords[]" id="myRecordsID12" value="ID"> 
     </td> 
    </tr> 
    <tr id="recordID15" class="myRecordEntry"> 
     <td> 
      <input type="checkbox" name="myRecords[]" id="myRecordsID15" value="ID"> 
     </td> 
    </tr> 
</table> 


$(document).ready(function() { 
    $(".myRecordEntry").click(function (e) { 
     var id = e.currentTarget.id; 
     var idnr = id.match(/\d+/g); 
     var chk = $("#myRecordsID" + idnr).is(":checked"); 
     if (chk == false) { 
      $("#myRecordsID" + idnr).prop("checked", true); 
     } else { 
      $("#myRecordsID" + idnr).prop("checked", false); 
     } 
    }); 
}); 

скрипка: http://jsfiddle.net/djwave28/p8Sr8/4/

редактировать: То, что вы хотите, вероятно, генерировать несколько строк с фонотекой и для этого строки таблиц могут иметь другой идентификатор. Я сделал код адаптируемым, чтобы удовлетворить эту потребность.