jquery, почему клик срабатывает более чем 1 раз ?
 

Добрый день гуру js, у меня к вам вопрос такого характера:

есть у меня селект и кнопка :yes:

<select class='ins'>
<option value='1' index='one'>one bla bla</option>
<option value='2' index='two'>two bla bla</option>
<option value='3' index='three'>three bla bla</option>
</select>
<button class='ins'>click</button>

<div id='place'></div>

на нее жмякаем и она в назначенном месте создает еще один селект с кнопкой (для удаления), а из нашего опция эта удаляется

$('button.ins').click(function(){															//клик на кнопку вставки,
  var NewMfClass = $('select.ins option:selected').val();									//берем параметры опции для
  var NewMfIndex = $('select.ins option:selected').attr('index');							//создания нового селекта.
  $('select.ins option:selected').remove();														//удаляем выбранную опцию
  var s = '<select class="'+NewMfClass+'">';													
  s += '<option value="0" price="50">'+NewMfIndex+' bla-bla 1</option>';								//создаем селект-i
  s += '<option value="5" price="30">'+NewMfIndex+' bla-bla 2</option>';
  s += '</select><button class="remove" remIndex="'+NewMfIndex+'" remClass="'+NewMfClass+'">Удалить</button>';
  $('#place').append(s);

  $('button.remove').click(function(){														//клик для удаления селекта-i
    var RemoveClass = $(this).attr('remClass');												//берем необходимые параметры
    var RemoveIndex = $(this).attr('remIndex');
    $('select.ins').append('<option value="'+RemoveClass+'" index="'+RemoveIndex+'">'+RemoveIndex+' bla bla</option>');//возвращаем опцию в селект-1
  });
});

затем, когда в нашем месте мы жмякаем удалить, наш селект удаляется и опция возвращается на место.
так вот проблема в том, что когда в место помещаю сразу 2-3 новых селекта, при удалении одного возвращается не одна опция, а сразу 2-3 одинаковых.
т.е. клик у меня срабатывает несколько раз.
подскажите как быть? чего сделать?
и еще, как мне новый добавляемый элемент сделать глобальным ?

спасибо за уделенное внимание :thanks:

погоди что то я не понял. что тебе нужно. при нажатии на кнопку селект будет удаляться? а как тогда создается новый селект? при выборе из списка этого селекта?

ну блин, я пример же привел, там все невооруженным глазом видно..

для опций-i селекта-1 создаются селекты-i, при этом удаляя опции-i.

при удалении селекта-i опции возвращаются на место.

потому что ты навешиваешь несколько обработчиков. вот смотри:
выбрал селект, нажал кнопку, у тебя создался еще 1 селект и кнопка для удаления и на эту кнопку ты навесил событие найдя эту кнопку вот так: $('button.remove')

потом ты снова выбрал селект ... и снова ты навешиваешь событие но уже на две кнопки, так как $('button.remove') тебе уже найдет 2 таких кнопки. и у тебя получается, что на первой кнопке у тебя навешано 2 события, а на 2й пока что 1но событие. идем далее:

снова выбираем селект ... и снова ты навешиваешь событие, в этот раз уже на 3 кнопки, так как $('button.remove') тебе уже найдет аж 3 таких кнопки. и на первой кнопке у тебя уже аж 3 события. на второй кнопке 2 события, а на 3й - одно

делай хотябы так: $('button.remove:last')

суть понял. $('button.remove:last') - вернет последнее событие на кнопке ? .. или он вернет последнюю кнопку с классом ремове?

все, теперь до конца разобрался, вернет последнее событие, спасибо большое :)

выведи в консоль console.log(...); и ты увидишь, что найдет последнюю кнопку из всей коллекции. так как надо привязать событие именно к последней кнопке, дабы предыдущие уже привязаны