Не срабатывает часть кода

[AndriiB]

Сразу же извиняюсь, так как нуб.
Имеется код:

<script type="text/javascript">
	$(function(){
		$("a#load").click(function(){
			$(this).after("<div class='loader' id='loader'></div>").fadeIn();
		});
	});
	
	function LoadInfo() {
		var xhttp = new XMLHttpRequest();
		xhttp.onreadystatechange = function() {
			if (this.readyState == 4 && this.status == 200) {
				document.getElementById("LoadInformation").innerHTML = this.responseText;
				document.getElementById("loader").style.display = "none";
			}
		};
		xhttp.open("POST", "test.php", true);
		xhttp.send(data);
	}
</script>

И кусок PHP:

if ($_POST) {
	echo('<a id="load" onclick="LoadInfo()">Click</a><br />'); # link 2
	exit;
}
# тут javascript
echo('<a id="load" onclick="LoadInfo()">Click</a><br />'); # link 1
echo('<p id="LoadInformation"></p>');

При нажатии на link 1 появляется картинка, которая играет, пока не будет получен ответ по POST запросу. Получаем точно такой же линк link 2, в котором отрабатывает onclick="LoadInfo()" и оправляет запрос, а вот картинка не появляется уже. Почему так?

[AndriiB]

Готов заплатить за помощь в вопросе.

[laimas]

Вот эта штука у элементов id="load" является уникальной, нельзя на странице плодить множество с одним и тем же id.

$("a#load").click ... этот обработчик установлен только для элемента на странице, для того что добавляется потом нет.

Иметь обработчик $("a#load").click и еще и onclick="LoadInfo()", это бессмыслица.

Коли все элементы вставляются в LoadInformation, значит делегировать ему обработку, выбросив нативный вызов onclick="LoadInfo()", заменив id на имя класса, и удалив id у класса loader:

$(function(){
    $("#LoadInformation").on('click', 'a.load', function(){
        $(this).after("<div class='loader'></div>").fadeIn();
        LoadInfo(); 
    });
});

[AndriiB]

Понял. Работает! Правда линк пришлось внутрь LoadInformation поставить. Но так даже лучше.

echo('<p id="LoadInformation"><a class="load">Click</a></p>');

А как передать какие-то параметры линком, чтобы после их обработать с помощью LoadInfo(var1,var2)?

[AndriiB]

<a class="load" id="first">Click</a>
<a class="load" id="second">Click</a>

var action = $('.load').attr('id');
	        LoadInfo(action);

Вроде работает. Ошибок тут нету?

[laimas]

Нет.

[AndriiB]

$("#LoadInformation").on('click', 'a.load', function(){

А как это переписать, если внутри LoadInformation будет несколько div и form по пути до a.load?

То есть примерно в таком варианте:

echo('<p id="LoadInformation"><div><form><div><a class="load" id="first">Click</a></div></form></div></p>');

Не получается поймать событие. Да и количества внутренних div может быть разным.

[laimas]

<p id="LoadInformation"><div> - не делайте такого. А о ID уже говорилось, что это уникальное значение, нельзя в блок "#LoadInformation", вставлять еще один блок "#LoadInformation". А сколько будет в блоке ссылок и как глубоко они будут спрятаны, для делегирования это не играет роли.

[AndriiB]

Видимо мы друг-друга не поняли.
Есть только один блок "#LoadInformation". Подгружается другая информация, без "#LoadInformation" разумеется.

Заменил p на div - все работает.