появление лишних элементов
Товарищи помогите!!! http://learn.javascript.ru/play/PNSePb
Кликаю "Добавить", затем кликаю по появившемуся меню Красный, Синий, Зеленый появляется новый элемент. Здесь все верно, но если я повторю процедуру, то уже добавиться не один а сразу два элемента, если еще раз провернуть процедуру то 3 за тем 4 и так далее. А мне нужно чтоб добавлялся только один элемент. В чем ошибка? вот код:
<!DOCTYPE HTML>
<html>
<head><meta charset='utf-8'></head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style>
input {
display: block;
}
.red {
background: red;
}
.blue {
background: blue;
}
.green {
background: green;
}
li {
color: #fff;
list-style: none;
padding: 0 0 0 10px;
margin: 0 0 15px 0;
width: 100px;
cursor: pointer;
}
ul {
display: none;
}
</style>
<script>
$(document).ready(function() {
$('#button').click(function() {
addItem();
});
function addItem () {
$('ul').css('display','block');
$('ul li').click(function() {
var block = $('<input type="text" value="1"> name="id[]"').addClass($(this).attr('class'));
$('body').append(block);
$('#menuTypeItem').css('display','none');
});
}
});
</script>
<body>
<input type="submit" value="Добавить" id="button">
<ul id='menuTypeItem'>
<li class="red">красный</li>
<li class="blue">синий</li>
<li class="green">зеленый</li>
</ul>
</body>
</html>
|
Yochi,
строка 49 при каждом клике на #button навешивает очередной клик на li |
Yochi,
<!DOCTYPE HTML>
<html>
<head><meta charset='utf-8'></head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style>
input {
display: block;
}
.red {
background: red;
}
.blue {
background: blue;
}
.green {
background: green;
}
li {
color: #fff;
list-style: none;
padding: 0 0 0 10px;
margin: 0 0 15px 0;
width: 100px;
cursor: pointer;
}
ul {
display: none;
}
</style>
<script>
$(document).ready(function() {
$('#button').click(function() {
$('ul').css('display','block');
});
$('ul li').click(function(event) {
var block = $('<input/>',{type:"text",value:"1",name:"id[]"} ).addClass($(this).attr('class'));
$('body').append(block);
$('#menuTypeItem').css('display','none');
});
});
</script>
<body>
<input type="submit" value="Добавить" id="button">
<ul id='menuTypeItem'>
<li class="red">красный</li>
<li class="blue">синий</li>
<li class="green">зеленый</li>
</ul>
</body>
</html>
|
| Часовой пояс GMT +3, время: 13:56. |