Слетает обработчик после AJAX
Доброго времени суток!
В теле HTML страницы есть такая конструкция <div id="ajax_response"> ... <span id="myid">bla-bla</span> ... </div> В скрипте на тег <span> повешен обработчик
(function() {
document.getElementById("myid").style.display = "none";
})();
После того, как AJAX обновит весь <div>, обработчик со <span> слетает. Подскажите пожалуйста, как правильно в этой ситуации повесить обработчик? Спасибо |
S.E.K.T.O.R.,
Ну дык при удалении элемента нет события привязанного к нему и свойств стиля привязанных к данному элементу DOM. Новозагруженные элементы(с теми же селекторами) не имеют отношения к объекту старых установок Проще менять добавлять класс элементу с селектором и прописать скрытие в стиле ============== Для переемственности текущего состояния нун перед загрузкой считывать в массив старые установки и возвращать на подгруженные идентичные элементы, или грузить избирательно лишь обновляемое содержимое ============== Мон вешать событийную обработку на элемент через атрибуты (onclick и т.д.) |
Цитата:
Цитата:
|
S.E.K.T.O.R.,
используйте делегирование |
Цитата:
|
S.E.K.T.O.R.,
document.body.onclick = function(e) {
if (e.target.id === "myid") {
e.target.style.display = "none";
}
};
Смотря что тебе надо, ты ведь не удосужился нормальный код привести в пример. Привел какие-то огрызки, в которых ничего не понять. |
Цитата:
Есть на странице <span>. Нужно через JS сделать ему style.display = "none" при загрузке страницы и что бы этот style не слетал после AJAX, так как сам нужный <span> находится внутри контейнера, который обновляется AJAX'ом. В вашем примере, стиль присваиватся при клике на <span>, мне же нужно то же самое, но при загрузке страницы. |
S.E.K.T.O.R.,
:) Поставить скрипт сразу после контейнера на странице, Вызвать програмный клик. А почему просто не поставить строку document.getElementById("myid").style.display = "none"; ? |
Цитата:
Опять жа без выложенного минимального кода - это обсуждения в "курилке" |
S.E.K.T.O.R.,
еще раз говорю, мы не ясновидящие... приведи часть кода который у тебя не работает, а гадать что и как у тебя там сделано никто не будет. |
devote
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Title Here</title>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<div id="AjaxResponse">
Bla-Bla
<span id="myid">
<input type="text" name="input1">
</span>
<input type="button" name="button1" value="Send" onclick="SendAjax()">
</div>
<script type="text/javascript">
<!--
(function() {
document.getElementById("myid").style.display = "none";
})();
function SendAjax() {
document.getElementById("AjaxResponse").innerHTML = 'Bla-Bla <span id="myid"><input type="text" name="input1"></span><input type="button" name="button1" value="Send" onclick="SendAjax()">';
return false;
}
// -->
</script>
</td>
</tr>
</table>
</body>
</html>
Упрощенно, но смысл тот же. После того, как данные полученные аяксом обновят все, что внутри дива, спан становится видимым, а нужно что бы оставался display = "none". В скрипт аякса я не могу вмешиваться, это часть движка. |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Title Here</title>
<style>
#AjaxResponse.span-hide #myid {
display: none;
}
</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<div id="AjaxResponse">
Bla-Bla
<span id="myid">
<input type="text" name="input1">
</span>
<input type="button" name="button1" value="Send" onclick="SendAjax()">
</div>
<script type="text/javascript">
(function() {
document.getElementById("AjaxResponse").className = "span-hide";
})();
function SendAjax() {
document.getElementById("AjaxResponse").innerHTML = 'Bla-Bla2 <span id="myid"><input type="text" name="input1"></span><input type="button" name="button1" value="Send" onclick="SendAjax()">';
return false;
}
</script>
</td>
</tr>
</table>
</body>
</html>
|
devote, огромное спасибо, то, что нужно :thanks:
|
| Часовой пояс GMT +3, время: 20:39. |