Добрый день. Не так давно начал углубление знание в JS и возникают вопросы, которые как мне кажутся являются нубовыми.
И так, первый вопрос, порекомендуйте книгу или другой источник, которые помогли бы мне не сталкиваться с такими сложностями, как описано далее. Возможно, Флэнеган, подойдет?
Второй, вопрос, а точнее практическая сложность.
Имеется некоторая таблица, в которой представлен перечень и имеются некоторые кликабельные элементы, например один из них это: <td class="edit"><i class="icon-pencil"></i></td>
Собственно по клику на тэг <i> у меня происходит редактирование. С этим все нормально, отлажено и работает.
Но кроме того, я хочу добавлять элементы в эту таблицу, для чего сделал небольшую функцию, которая пocредством метода jquery prepend добавляет необходимое.
Т.к. на все <i> в этой таблице навешана функция на клик($("#sectors tr td.edit i").click(function()), я думал что этого будет достаточно. Но на практике, это оказалось не так, т.е. клик не срабатывает. Причем не работает функция обработчик по клику ни на одном элементе из таблицы, которые созданы через prepend.
Почему такое может происходить?
На всякий случай приведу куски кода, которые вызываются:
// Редактировать сектор
$("#sectors tr td.edit i").click(function() {
$("#trap").focus();
if($(this).attr('class')=='icon-pencil'){
console.log('edit');
$("#sectors tr td.edit").find('i').removeClass('icon-pencil');
$(this).addClass('icon-ok-sign');
$("#sectorActions tr td button").attr('disabled', true);
$(this).parent().parent().find('input').attr('checked', true);
}
else if($(this).attr('class')=='icon-ok-sign'){
console.log('save');
$(this).removeClass('icon-ok-sign');
$("#sectors tr td.edit").find('i').addClass('icon-pencil');
$("#sectorActions tr td button").removeAttr('disabled');
}
});
// Добавляем сектор
$("#sectorCreate").click(function() {
$("#trap").focus();
var sectorName=$("#sectorName").val(),
sectorId=$("#sectorId").val(),
sectorCourier=$("#sectorSelectCourier").val();
$("#sectorName").val('');
createSector(sectorId,sectorName,sectorCourier);
});
function createSector(id,name,courier){
if(name.length == 0||courier.length == 0) {
return false;
}
var tmp = courier;
if (courier > 12) {
tmp = courier % 12;
}
$('#sectors').prepend('<tr class="'+id+'">'+
'<td class="w16"><div class="point point-color-'+colors[tmp].colorLabel+' showSector"><span>'+courier+'</span></div></td>'+
'<td class="sectorName">'+name+'</td>'+
'<td class="edit"><i class="icon-ok-sign"></i></td>'+
'<td><input class="collectionSectorToggle" type="checkbox" value="1" checked="checked"></td>'+
'</tr>');
}
