Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.07.2013, 23:54
Аспирант
Отправить личное сообщение для Yochi Посмотреть профиль Найти все сообщения от Yochi
 
Регистрация: 05.09.2011
Сообщений: 28

появление лишних элементов
Товарищи помогите!!! 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>
Ответить с цитированием
  #2 (permalink)  
Старый 11.07.2013, 00:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,076

Yochi,
строка 49 при каждом клике на #button навешивает очередной клик на li
Ответить с цитированием
  #3 (permalink)  
Старый 11.07.2013, 00:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,076

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Удалить и вернуть массив из удаленных элементов splice Paulyyy Общие вопросы Javascript 15 29.05.2013 15:36
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 11:33
Сгенерировать 2 последовательности и узнать сколько в них одинаковых элементов Ирина Владимировна Общие вопросы Javascript 10 24.03.2012 18:18
Поочередное появление элементов <tr> gromitsu jQuery 3 27.11.2011 21:20
Появление элементов форм maxim339 Элементы интерфейса 7 07.10.2011 14:39