Не корректно вешаются события - JavaScript, Ajax

dimoncraft · 24.12.2013, 00:19

Ребят, есть простейшая проблема, но не могу разрулить.Помогите пожалуйста.

Есть кнопка ( в коде - <div id="oncl">Add</div> ), которая при нажатии на неё добавляет в поле ( в коде <div id="ShowWindow"> </div>) кубик (в коде <div class="boom"></div>). Нужно на все кубики вешать событие,чтобы при клике на них,они удалялись (тот,по которому кликнул).

Код скидываю ниже :

Пример.html :

Код:

<!DOCTYPE html>
<meta charset="UTF-8"/>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
    <div id="oncl">Add</div>
    <div id="ShowWindow">
    </div>

    <script src="Javka.js"></script>
</body>
</html>

style.css :

Код:

.boom
{
width:20px;
height:20px;
margin:10px;
background-color:black;
}
#oncl
{
clear:both;
width:100px;
height:20px;
background-color:yellow;
border:1px solid black;
text-align:center;
margin:10px;
}
#ShowWindow
{
width:100px;
height:200px;
margin:10px;
border:1px solid #AFEEEE;
border-radius:3px;
background-color:#ADD8E6;
float:left;
overflow:auto;
}

Javka.js :

Код:

(function()
{
    oncl=document.querySelector("#oncl");
    Show=document.querySelector("#ShowWindow");
    var quads=[0];
    oncl.onclick=function()
    {
         Show.innerHTML+="<div class='boom'></div>";
         var q1=document.querySelectorAll(".boom").length-1;
         quads.push(document.querySelectorAll(".boom")[q1]);
         document.querySelectorAll(".boom)[q1].addEventListener("click",function(){Show.removeChild(this);},false);
     }
}())

Как видите,я пытаюсь добавлять эти кубики в массив динамически с помощью метода .push(),хочу,чтобы очень быстрое решение получилось

Прошу помочь,заранее спасибо!!

dimoncraft · 24.12.2013, 00:20

Код:

bnmbn

Экспериментальное сообщение,не учитывайте его. Проверял,как работает тег [CODE];

Fenex · 24.12.2013, 10:34

Код:

document.querySelectorAll(".boom)[q1]

У вас здесь двойная кавычка пропущена, как минимум.

http://jsfiddle.net/Fenex/sJ5sJ/

Naive · 24.12.2013, 12:08

у вас повторно навешиваются события, в таких случаях используют всплывающие лайв-события

dimoncraft · 24.12.2013, 13:03

Цитата:

Сообщение от Fenex

Код:

document.querySelectorAll(".boom)[q1]

У вас здесь двойная кавычка пропущена, как минимум.

http://jsfiddle.net/Fenex/sJ5sJ/

Благодарю за решение! всё понял , кроме строчки " Show.inserBefore (div, null);"
подскажите пожалуйста, чтотона делает, и что в ней является вторым входным параметром.

Naive · 24.12.2013, 13:14

Цитата:

Сообщение от dimoncraft

Благодарю за решение! всё понял , кроме строчки " Show.inserBefore (div, null);"
подскажите пожалуйста, чтотона делает, и что в ней является вторым входным параметром.

вставляет элемент div внутрь Show, вторым параметром указывается элемент, перед которым должен будет располагаться div, передача объекта null, говорит, что такого объекта нет и элемент забросится в конец нод-листа. В данном случае логичнее было использовать appendChild.

dimoncraft · 24.12.2013, 17:03

Цитата:

Сообщение от Naive

вставляет элемент div внутрь Show, вторым параметром указывается элемент, перед которым должен будет располагаться div, передача объекта null, говорит, что такого объекта нет и элемент забросится в конец нод-листа. В данном случае логичнее было использовать appendChild.

Спасибо,добрый человек!

dimoncraft · 24.12.2013, 17:14

Кто-то может объяснить,почему не работал мой способ?
я же делал практически тоже самое

Fenex · 24.12.2013, 22:18

Цитата:

Кто-то может объяснить,почему не работал мой способ?
я же делал практически тоже самое

Нет, вовсе не то же самое. =)
Вся фишка в строчке

Код:

 Show.innerHTML+="<div class='boom'></div>";

Эту строчку можно разобрать как две отдельные команды:

Код:

var innerhtml = Show.innerHTML + "<div class='boom'></div>";
Show.innerHTML = innerhtml;

Первая строчка получает код html элемента Show в виде строки и добавляет в конец ещё строковые символы. В переменной innerhtml строка, не элементы!
Второй строчкой кода все элементы, которые находятся внутри элемента Show, удаляются, вместо них строется DOM-структура из строки innerhtml. После того, как встроились новые элементы, вы ставите слушатель на событие click только последнего элемента.

Основная разница между вашим и моим способами - я работал с DOM-элементами, а вы со строками.

Цитата:

В данном случае логичнее было использовать appendChild.

Вот чорт. Это же замыливание глаз началось. Пичаль (

Naive · 24.12.2013, 23:25

Цитата:

Сообщение от Fenex

Вот чорт. Это же замыливание глаз началось. Пичаль (

Есть что-то чего я не знаю? Инсерт работет быстрее? Или не везде работает аппенд-чайлд?

Цитата:

Сообщение от Fenex

Основная разница между вашим и моим способами - я работал с DOM-элементами, а вы со строками.

+, конечно, но неужели это не очевидно? О_о

24.12.2013, 00:19	#1
dimoncraft Пользователь Регистрация: 27.03.2013 Сообщений: 22	Не корректно вешаются события Ребят, есть простейшая проблема, но не могу разрулить.Помогите пожалуйста. Есть кнопка ( в коде - <div id="oncl">Add</div> ), которая при нажатии на неё добавляет в поле ( в коде <div id="ShowWindow"> </div>) кубик (в коде <div class="boom"></div>). Нужно на все кубики вешать событие,чтобы при клике на них,они удалялись (тот,по которому кликнул). Код скидываю ниже : Пример.html : Код: `<!DOCTYPE html> <meta charset="UTF-8"/> <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="oncl">Add</div> <div id="ShowWindow"> </div> <script src="Javka.js"></script> </body> </html>` style.css : Код: `.boom { width:20px; height:20px; margin:10px; background-color:black; } #oncl { clear:both; width:100px; height:20px; background-color:yellow; border:1px solid black; text-align:center; margin:10px; } #ShowWindow { width:100px; height:200px; margin:10px; border:1px solid #AFEEEE; border-radius:3px; background-color:#ADD8E6; float:left; overflow:auto; }` Javka.js : Код: `(function() { oncl=document.querySelector("#oncl"); Show=document.querySelector("#ShowWindow"); var quads=[0]; oncl.onclick=function() { Show.innerHTML+="<div class='boom'></div>"; var q1=document.querySelectorAll(".boom").length-1; quads.push(document.querySelectorAll(".boom")[q1]); document.querySelectorAll(".boom)[q1].addEventListener("click",function(){Show.removeChild(this);},false); } }())` Как видите,я пытаюсь добавлять эти кубики в массив динамически с помощью метода .push(),хочу,чтобы очень быстрое решение получилось Прошу помочь,заранее спасибо!! Последний раз редактировалось dimoncraft; 24.12.2013 в 00:22.

24.12.2013, 00:20	#2
dimoncraft Пользователь Регистрация: 27.03.2013 Сообщений: 22	Код: `bnmbn` Экспериментальное сообщение,не учитывайте его. Проверял,как работает тег [CODE];

24.12.2013, 10:34	#3
Fenex Форумчанин Регистрация: 15.02.2012 Сообщений: 821	Код: `document.querySelectorAll(".boom)[q1]` У вас здесь двойная кавычка пропущена, как минимум. http://jsfiddle.net/Fenex/sJ5sJ/ ^-.-^ My GitHub Последний раз редактировалось Fenex; 24.12.2013 в 10:47.

24.12.2013, 12:08	#4
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	у вас повторно навешиваются события, в таких случаях используют всплывающие лайв-события Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Запрос не корректно работает	formula-1	БД в Delphi	7	15.11.2013 08:41
код работает не корректно	AcTiV	Общие вопросы C/C++	4	25.12.2012 23:01
События в WPF. Обращение к компонентам формы из события	Casper-SC	Общие вопросы .NET	3	25.07.2010 19:03
Не корректно отображается в ИЕ	pozitor	WordPress и другие CMS	7	30.07.2009 16:15
Программа работает не корректно	Neymexa	Общие вопросы C/C++	5	24.12.2008 19:17

24.12.2013, 17:14	#8
dimoncraft Пользователь Регистрация: 27.03.2013 Сообщений: 22	Кто-то может объяснить,почему не работал мой способ? я же делал практически тоже самое