Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   jquery -> prepend('<tr>...</tr>') - > нет клика по внутренним эл-там (https://javascript.ru/forum/jquery/35165-jquery-prepend-%27-tr-tr-%27-net-klika-po-vnutrennim-ehl-tam.html)

megagramm 01.02.2013 18:50

jquery -> prepend('<tr>...</tr>') - > нет клика по внутренним эл-там
 
Добрый день. Не так давно начал углубление знание в 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>');
}

рони 01.02.2013 18:54

megagramm,
ON а не click если хотите захвата будущих элементов
http://api.jquery.com/on/

animhotep 01.02.2013 18:55

чтобы динамически созданные элементы работали как и статические их нужно создавать через .on

$(document).on("click", "#sectors tr td.edit i", function()

megagramm 05.02.2013 14:09

спасибо. помогло.
как я понимаю в jquery 1.9 on() уже исключен? чем же там пользоваться тогда?

рони 05.02.2013 14:25

Цитата:

Сообщение от megagramm
я понимаю в jquery 1.9 on() уже исключен?

откуда у вас такая информация?

megagramm 05.02.2013 14:31

Цитата:

Сообщение от рони
откуда у вас такая информация?

в своем коде обновил билиотеку с 1.7.2 до 1.9, и on('click' перестал работать. начал шерстить доки. что-то нашел на эту тему. я не уверен что именно on(), но тогда пошерстив текст по диагонали, я решил пока откатиться назад на 1.7.2.
я попробую найти ссылку и опубликую тут.

megagramm 05.02.2013 14:33

Пардон. наоборот, речь шла о live()
Цитата:

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
Но тогда мне все ж придется разбираться почему on('click' не работает с современными версиями :(

animhotep 05.02.2013 18:06

.on работает, возможно вешаешь его на ещё не существующий элемент
вешай на $(document).on("click", не прогадаешь


Часовой пояс GMT +3, время: 08:12.