Не срабатывает часть кода
Сразу же извиняюсь, так как нуб.
Имеется код:
<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()" и оправляет запрос, а вот картинка не появляется уже. Почему так? |
Готов заплатить за помощь в вопросе.
|
Вот эта штука у элементов 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();
});
});
|
Понял. Работает! Правда линк пришлось внутрь LoadInformation поставить. Но так даже лучше.
echo('<p id="LoadInformation"><a class="load">Click</a></p>');
А как передать какие-то параметры линком, чтобы после их обработать с помощью LoadInfo(var1,var2)? |
<a class="load" id="first">Click</a> <a class="load" id="second">Click</a>
var action = $('.load').attr('id');
LoadInfo(action);
Вроде работает. Ошибок тут нету? |
Нет.
|
$("#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 может быть разным. |
<p id="LoadInformation"><div> - не делайте такого. А о ID уже говорилось, что это уникальное значение, нельзя в блок "#LoadInformation", вставлять еще один блок "#LoadInformation". А сколько будет в блоке ссылок и как глубоко они будут спрятаны, для делегирования это не играет роли.
|
Видимо мы друг-друга не поняли.
Есть только один блок "#LoadInformation". Подгружается другая информация, без "#LoadInformation" разумеется. Заменил p на div - все работает. |
| Часовой пояс GMT +3, время: 11:08. |