| |
|
|
| | Прошу помочь с append
вот мой пример:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script>
$(document).ready(function()
{
$("#idd").click(function(e)
{
var variablex = $(this).attr("value");
alert(variablex);
});
});
</script>
<p id="styler"><div id="idd" value="1">CLICK IT</div></p>
</body>
|
При клике на CLICK IT выскакивает alert с value=1 все работает отлично.. но мне нужен такой код:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script>
$(document).ready(function()
{
$("#idd").click(function(e)
{
var variablex = $(this).attr("value");
alert(variablex);
});
$("#styler").append('<div id="idd" value="1">CLICK IT</div>');
});
</script>
<p id="styler"></p>
</body>
|
Этот код отлично добавляет <div> в <p> Но не работет alert почему так ? | |
| |
|
|
| |
|
|
| |
для: madmozg
(30.05.2010 в 18:14)
| | | Потому, что вы устанавливаете событие объекту несуществующему на странице. Сравните:
<script>
$(document).ready(function() {
$("#styler").append('<div id="idd" value="1">CLICK IT</div>');
$("#idd").click(function(e) {
var variablex = $(this).attr("value");
alert(variablex);
});
});
</script>
|
| |
| |
|
|
| |
|
|
| |
для: madmozg
(30.05.2010 в 18:14)
| | | >"Этот код отлично добавляет <div> в <p>"
Это Вам показалось.
Внутри тега <P> не может быть любого другого блочного тега.
Если Вы возжелали иметь <p><div></div></p>, то этого у Вас не получится.
Браузер перерисует это в следующий вид: <p></p><div></div><p></p>,
т.е. вместо запланированных Вами ДВУХ тегов Вы получите ТРИ.
Проверьте:
<body onload="alert (document.body.innerHTML)">
<p><div></div></p>
</body>
|
| |
| |
|
|
| |
 16.7 Кб |
|
| |
для: АЯ
(30.05.2010 в 19:14)
| | | Ну почему же, jQuery выполнит именно так:
<p id="styler"><div id="idd" value="1">CLICK IT</div></p> | |
| |
|
|
| |
|
|
| |
для: sim5
(31.05.2010 в 04:15)
| | | Ещё раз: то, что Вы видите в редакторе - никак не соответствует реальному положению дел.
В редакторе показан код, который Вы предлагаете браузеру.
А внутри браузера находится код, который браузером переработан.
Чем этот код создан - руками прописан, или Вашим любимым jQuery - никакой разницы НЕТ.
Браузер интерпретирует код ТАК, как это прописано в программе браузера.
А в программе браузера написано: «внутри тега <P> не может быть любого другого блочного тега».
Вот, чтобы Вам совсем стало понятно.
Имеем код из двух групп.
В первом случае - <DIV> вложен в другой <DIV id="ddd">
Во втором случае - <DIV> вложен в <P id="ppp">
В обоих случаях родительскими элементами для вложенных <DIV>'ов вроде бы должны являться теги с id="ddd" и id="ppp".
Так?
Нет, не так - во втором случае родительским является тег <body>.
Проверяйте:
<body>
<div id="ddd"><div onclick="with (this.parentNode) alert (tagName + ' = ' + id)">CLICK1</div></div>
<p id="ppp"><div onclick="with (this.parentNode) alert (tagName + ' = ' + id)">CLICK2</div></p>
</body>
|
И происходит это потому, что браузер преобразовывает написанный код в следующий:
<p id="ppp"></p><div onclick="with (this.parentNode) alert (tagName + ' = ' + id)">CLICK2</div><p></p>
|
Так что, если на клетке слона прочтёшь надпись «буйвол», не верь глазам своим. | |
| |
|
|
| |
|
|
| |
для: АЯ
(31.05.2010 в 10:14)
| | | Это то и интересно. Код прописанный явно:
<p id="ppp"><div>CLICK2</div></p>
визуально отображает на странице DIV с двумя параграфами расположенными выше и ниже его (если бордюры указать). А вот при добавлении элемента в параграф в jQuery, визуально все будет как и желаем - элемент в элементе. А также, выполнив:
<script>
$(document).ready(function() {
$("#styler").append('<div id="idd" value="1">CLICK IT</div>');
$("#idd").click(function(e) {
alert(this.parentNode.tagName);
});
});
</script>
<p id="styler"></p>
|
получим Р. | |
| |
|
|
| |
|
|
| |
для: sim5
(31.05.2010 в 11:10)
| | | Хм, действительно, Вы правы:
<html>
<head>
<style>
p {border: 1px solid red}
</style>
<script>
onload = function ()
{
var dv = document.createElement ('div');
with (dv.style) {height = '100px'; background = 'yellow'}
dv.innerHTML = 'CLICK IT';
dv.onclick = myFunc;
document.getElementById ('ppp').appendChild (dv);
}
function myFunc (event)
{
var evt = window.event || event, obj = evt.srcElement || evt.target;
alert (obj.parentNode.tagName);
}
</script>
</head>
<body>
<p id="ppp"></p>
</body>
</html>
|
Бред, написанный явно, браузер исправляет.
Тот же бред, исполненный скриптом, браузер за бред не признаёт.
Будем знать.
Спасибо. | |
| |
|
|
| |
|
|
| |
для: АЯ
(31.05.2010 в 12:01)
| | | Значит это не бред, а вольное толкование. )
Кстати, только что обратил внимание:
>или Вашим любимым jQuery
Ну почему любимый? Он такой же любимый, как и просто JS. )
Если все можно написать на "голом" JS, и будет легко и компактно, то я не использую его. Но есть масса задач, где jQuery упрощает работу, позволяя концентрировать внимание на основном, в этом случае не отказываюсь от него, он удобен. Впрочем, это только мое мнение. | |
| |
|
|
| |
|
|
| |
для: madmozg
(30.05.2010 в 18:14)
| | |
><script>
>$(document).ready(function()
>{
>$("#idd").click(function(e)
>{
>var variablex = $(this).attr("value");
>alert(variablex);
>});
>
>});
></script>
|
Замените: $("#idd").click(function(e)
на $("#idd").live("click",function(e) | |
| |
|
|
