Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Не срабатывает часть кода (https://javascript.ru/forum/misc/76383-ne-srabatyvaet-chast-koda.html)

AndriiB 06.01.2019 20:52

Не срабатывает часть кода
 
Сразу же извиняюсь, так как нуб.
Имеется код:
<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 06.01.2019 21:24

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

laimas 07.01.2019 00:57

Вот эта штука у элементов 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 07.01.2019 10:04

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

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

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

AndriiB 07.01.2019 10:12

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

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


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

laimas 07.01.2019 13:14

Нет.

AndriiB 08.01.2019 15:44

$("#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 08.01.2019 16:35

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

AndriiB 08.01.2019 16:48

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

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


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