У меня есть некоторые флажки, которые работают нормально, но когда я пытаюсь запрограммировать их значение в следующем слушателе, я могу только проверить/снять флажки с помощью щелчка по строке таблицы, а не пометить:
$('body').on('click', '#sourceTable tbody tr', function() {
var r = dTable.fnGetData(this);
var boxId = r[2].substr(r[2].indexOf("id")+4, 7);
if (document.getElementById(boxId).checked){ //checked is true
document.getElementById(boxId).checked=false; //uncheck the box
}
else{
document.getElementById(boxId).checked=true; //check the box
}
});
Любая идея, как я могу сделать то и другое?
EDIT: с учетом изменений, указанных в ответе ниже, только флажки можно изменять без строк, данные не считываются из строки DataTable:
$('#sourceTable tbody tr, #sourceTable tbody tr td input').click(function (e) {
e.stopPropagation();
var r = dTable.fnGetData('#sourceTable tbody tr');
var boxId = r[2].substr(r[2].indexOf("id")+4, 7);
//alert($(boxId).val());
if (document.getElementById(boxId).checked){
document.getElementById(boxId).checked=false;
var i = PEMSToDisplay.indexOf(r[0]);
if(i != -1) {
PEMSToDisplay.splice(i, 1);
}
}
else{
document.getElementById(boxId).checked=true;
PEMSToDisplay.push(r[0]);
}
});
Когда вы нажимаете на этот флажок, браузер выполняет действие по умолчанию для mousedown/mouseup (изменение состояния флажка), тогда ваш обработчик запускается правильно, и флажок снова меняет состояние.
Смотрите эту скрипку:
$('body').on('click', '.foobar', function(){
var chk = $('#cb').prop( 'checked' );
$('#cb').prop( 'checked', !chk );
var after = $('#cb').prop( 'checked' );
console.log('before :', chk, 'after :', after);
});
Обратите внимание, что при щелчке по флажку начальное состояние не совпадает с тем, которое вы видите - браузер уже изменил состояние флажка перед выполнением обработчика click
.
Один из способов изменить обработчик: если цель события click
- это флажок, ничего не делайте:
$('body').on('click', '.foobar', function(e){
if( !$(e.target).is('#cb') ){
var chk = $('#cb').prop('checked');
$('#cb').prop('checked', !chk );
}
});
Примечание. Сначала я думал, что вы можете предотвратить изменение состояния флажка с помощью e.preventDefault()
, но это не сработало - не удалось добиться успеха в mousedown
и mouseup
.
Вам нужно настроить таргетинг как на строку таблицы #sourceTable tbody tr
и на флажок, который, как я полагаю, будет выглядеть как #sourceTable tbody tr td input
. После этого вам нужно будет остановить событие click от пузырьков дерева DOM от входа в строку таблицы, вызывая оба из них, используя stopPropagation.
$('#sourceTable tbody tr, #sourceTable tbody tr td input').click(function (e) {
e.stopPropagation();
...
Вам также потребуется заменить this
на $('#sourceTable tbody tr')
поскольку this
может быть либо строка, либо флажок.
Изменить: согласно комментариям, это будет лучше:
$('#sourceTable tr, #sourceTable input').click(function (e) {
e.stopPropagation();
var r = dTable.fnGetData($(this).closest('tr').get(0));
...
var r = dTable.fnGetData('#sourceTable tbody tr');
должно быть var r = dTable.fnGetData($('#sourceTable tbody tr'));
это помогает?