jQuery click() и AJAX

[splean]

Доброго времени суток!

в общем, ситуация:

есть элемент

<div id="somwhere">
<h1 class="className" id="idName">KLIK!!</h1>
</div>

Есть следующий JS код:

$(document).ready(function(){
$(".className").click (
function() {
	var thisID = this.id;
	$.post(
		"/ajax.php",
		{thisID: thisID}, 
		function(data) {
			$("#somewhere").html(data)
		}
	)
}
);
});

Т.е. при клике после загрузки документа по этому заголовку, происходило обращение к серверу, где в файле ajax.php что то там делалось, и в блок somewhere возвращался этот же заголовок, только с другим именем, например "ANOTHER KLIK"

Проблема в том, что после возвращения результата ВТОРОЙ КЛИК НЕ СРАБАТЫВАЛ, проверял алертом. Т.е., я получил один раз новый заголовок, и ожидаю при клике на нем получить снова заголовок другой. Но не выходит.

Почитал англоязычные ресурсы как смог, примерно к такому выводу пришел:

jQuery работает только с готовым DOM, а все последующие изменения, как например изменения в DOM-е аяксом, просто так с помощью jQuery не будут обрабатываться.

Почитал также про плагин liveQuery, но нихрена вообще не понял, если честно. Хотелось бы консультации небольшой, объясните где я не прав. Заранее всем спасибо.

Edited March 6, 2010 by splean

[s0rr0w]

somewhere != somwhere

[splean]

не суть, я этот код набросал сходу, там все сложнее и много лишнего просто, но логика та же. вопрос открыт.

[s0rr0w]

  splean said:

Доброго времени суток!

1. Проблема в том, что после возвращения результата ВТОРОЙ КЛИК НЕ СРАБАТЫВАЛ, проверял алертом. Т.е., я получил один раз новый заголовок, и ожидаю при клике на нем получить снова заголовок другой. Но не выходит.

2. jQuery работает только с готовым DOM, а все последующие изменения, как например изменения в DOM-е аяксом, просто так с помощью jQuery не будут обрабатываться.

Почитал также про плагин liveQuery, но нихрена вообще не понял, если честно. Хотелось бы консультации небольшой, объясните где я не прав. Заранее всем спасибо.

1. После этого

$("#somewhere").html(data)

у вас больше нет ноды, на которой сработал onclick.

2. Любой JS код может работать только с готовым DOM. Любые изменения контроллируются программистом, машина не умеет угадывать ваши мысли.

[splean]

Вот, причину значит я верно понял. А как решить то проблему эту?

Задача изначально сама по себе простая - в базе N новостей, на главную выводится последняя - функция сразу генерит блок html-кода. При клике на "обновить" аякс подменяет этот блок на другой, выводя N-1 новость и т.д. при последующих кликах. подменяет, получается, включая саму кнопку обновить.

Решение одно только - сделать так чтобы при обновлении код кнопки не заменялся? Или есть еще варианты?

Edited March 7, 2010 by splean

[s0rr0w]

  splean said:

Вот, причину значит я верно понял. А как решить то проблему эту?

Задача изначально сама по себе простая - в базе N новостей, на главную выводится последняя - функция сразу генерит блок html-кода. При клике на "обновить" аякс подменяет этот блок на другой, выводя N-1 новость и т.д. при последующих кликах. подменяет, получается, включая саму кнопку обновить.

Решение одно только - сделать так чтобы при обновлении код кнопки не заменялся? Или есть еще варианты?

Решений миллион. Все зависит от того, какую конкретно задачу нужно решить.

1. Перенести onclick с ".className" на "#somewhere"

2. Вынести в отдельную функцию весь код, что по domready вызывается, и после $("#somewhere").html(data) снова вызвать эту функцию.

[splean]

ugrainform . ru

внизу есть таблица, 3х3, новости. При клике на заголовок можно посмотреть через консоль файрбаговскую что как происходит.

по второму варианту вопрос - получается, что код отвещающий за онклик() и располагающийся в домреди оформляем просто как функцию и сразу после .html(data) вызвать эту функцию? Но ведь .html(data) как раз вызывается на онклике. не понятно немного тут(

Да, я так посмотрел - в моем случае наверное правильнее будет переписать функцию так, чтобы она возвращала только тело новости, без самого заголовка типа "Власть"

Если советов по второму варианту не будет, перепишу. Оставьте комментарий.

[s0rr0w]

  splean said:

по второму варианту вопрос - получается, что код отвещающий за онклик() и располагающийся в домреди оформляем просто как функцию и сразу после .html(data) вызвать эту функцию? Но ведь .html(data) как раз вызывается на онклике. не понятно немного тут(

Представьте себе некую кнопку, при нажатии на которую панель с кнопкой переворачивается, и появляется новая кнопка. При нажатии на которую панель переворачивается и все повторяется.

То, что загрузка данных вызывается на онклике, не должно вас смущать.

Весь процесс происходит примерно следующим образом

1. Пользователь надал на кнопку.

2. Вызвалась функция загрузки контента

3. Проверяем, загрузился ли контент.

4. Если нет, то переходим к пункту 3

5. Перезаписываем содержимое контейнера

6. Назначаем новый обработчик.

Назначение обработчика никак не связано с выполнением этого самого обработчика, потому что для первой кнопки он будет свой, а для второй - свой. Хоть и функция будет одна и та же, для каждой из нод будет создана своя ссылка на эту функцию.

  splean said:

Да, я так посмотрел - в моем случае наверное правильнее будет переписать функцию так, чтобы она возвращала только тело новости, без самого заголовка типа "Власть"

Если советов по второму варианту не будет, перепишу. Оставьте комментарий.

Вот этот вариант куда более правильный.

[splean]

Спасибо за уделенное время, переделал, работает.

Однако для развития хотелось бы узнать по поводу первого варианта.

Как после того, как я перезапишу весь блок вместе с кнопкой, назначить новый обработчик этой самой кнопке? Если отталкиваться от кода в самом первом сообщении, например.

После .html(data) что мне нужно сделать? Я завис на словах

  Quote

Вынести в отдельную функцию весь код, что по domready вызывается, и после $("#somewhere").html(data) снова вызвать эту функцию.

т.к. получается зацикливание какое-то. после .html(data) я вызываю функцию, в которой собственно это .html(data) и происходит.

[s0rr0w]

  splean said:

После .html(data) что мне нужно сделать? Я завис на словах

т.к. получается зацикливание какое-то. после .html(data) я вызываю функцию, в которой собственно это .html(data) и происходит.

Зацикливание у вас в голове. Потому что вы не отличаете назначение обработчика от его вызова.

$(".className").click - это присвоение обработчика событию onclick. Присвоение не значит, что эта функция будет немедленно вызвана, а вызвана только тогда, когда на этом элементе сработает событие onclick.

Далее передается функция, код которой должен выполниться при возникновении этого самого события. Фактически будет вызвана другая функция post. Этой самой функции передается обработчик, который будет вызван, когда возникнет событие onload (реально там чуть по другому, но суть одна).

Выполнение обработчика onclick завершается ровно тогда, когда будет отосланы данные через post. Обработчик onload будет выполнен через какое-то время, и к onclick обработчику не имеет никакого отношения.

[splean]

отличаю, но видимо совсем слабо, потому и спрашиваю

как я понимаю весь процесс

1) назначили обработчик - в данном случае он стоит на домреди. т.е., когда документ загрузился, устанавливается, что при клике на классНэйм будет происходить что-то там описанное

2) кликнули на этот классНэйм, получили данные постом, вставили их в блок, фактически заменив элемент классНейм на точно такой же, но теперь на нем не установлен обработчик, потому что ставится он по домреди, верно?

3) теперь после получения и вывода .html(data) назначаем обработчик для клика по классНейму.

написав про зацикливание я имел в виду следующее:

$(".className").click (

....что-то делаем

$("#somewhere").html(data);

и вот здесь нужно назначить обработчик, да?

....

);

а как этот обработчик назначить? снова написав там же то же самое - $(".className").click (...$("#somewhere").html(data);....); -?

вот где я запутался и хочу разобраться.

[s0rr0w]

  splean said:

а как этот обработчик назначить? снова написав там же то же самое - $(".className").click (...$("#somewhere").html(data);....); -?

вот где я запутался и хочу разобраться.

function myClickHandler () {
	$(".className").click (
	function() {
		var thisID = this.id;
		$.post(
			"/ajax.php",
			{thisID: thisID},
			function(data) {
				$("#somewhere").html(data);
				myClickHandler();
			}
		)
   })
}

$(document).ready(myClickHandler);

100% работоспособности не гарантирую, мог где-то ошибку допустить.