Товарищи помогите!!!
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>