Javascript-форум - Обработка события у селектора, добавляемого с помощью append

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Обработка события у селектора, добавляемого с помощью append (https://javascript.ru/forum/jquery/9726-obrabotka-sobytiya-u-selektora-dobavlyaemogo-s-pomoshhyu-append.html)

Обработка события у селектора, добавляемого с помощью append

Здравствуйте.
Имею следующий код:

<form action="">
  <fieldset>
     <p class="software">    
       <select name="what">
          <option>Выберите название программы *</option>
          <option value='Программа 1'>Программа 1</option>
          <option value='Программа 2'>Программа 2</option>	
      </select>
      <input type="text" name="reg_num" value="Регистрационный номер *" />
    </p>
    <p class="add"><a href="#">Добавить программу</a></p>
  </fieldset>
</form>

function addSoftware() {
	  $("p.software:first").clone(true).append("&nbsp;&nbsp;<a class='del' href='#'>удалить</a>").insertBefore(this)
	}
	
function delSoftware() {
	  $(this).closest("p.software").remove()	
	}

$("p.add").click(addSoftware)
$("a.del").click(delSoftware)

Но обработка с помощью функции delSoftware почему-то не работает. Есть подозрение, что селектор a.del скрипт не видит. Так ли это и как можно выйти из ситуации?

вы назначаете обработчик события на еще не существующие элементы
ставьте обработчик события на уже созданный объект, и все будет ок

Цитата:

Сообщение от Gvozd (Сообщение 57654)

ставьте обработчик события на уже созданный объект, и все будет ок

Подскажите, как это сделать для данного случая?

function addSoftware() {
      $("p.software:first").clone(true).append("&nbsp;&nbsp;<a class='del' href='#'>удалить</a>").insertBefore(this)
    // вот тут надо найти ваш a и ему установить событие
    $("найденный a").click(delSoftware)
    }

micscr, спасибо.
А еще небольшой вопрос.
Сейчас у меня клонируется первый параграф с классом software.

<p class="software">     
	       <select name="what"> 
	          <option>Выберите название программы *</option> 
	          <option value='Программа 1'>Программа 1</option> 
	          <option value='Программа 2'>Программа 2</option>   
	      </select> 
	      <input type="text" name="reg_num" value="Регистрационный номер *" /> 
	    </p>

Хотелось бы, чтобы клонировался этот параграф, но к name добавлялся уникальный номер, например, what1, what2, reg_num1, reg_num2 и т.п. Это с помощью jQuery возможно сделать?

Цитата:

Сообщение от Юрий Шу (Сообщение 57660)

Это с помощью jQuery возможно сделать?

Да.
После клонирования поустанавливайте эти атрибуты name в нужные значения $('что-то').attr(name, 'what' + ind).
ind самое простое - наращивайте при добавлении глобально и будет уникальным.

micscr, что-то я по-моему тут наворочил…

function addSoftware() {
	  var newObject = $("p.software:first").clone(true).append("&nbsp;&nbsp;<a class='del' href=''>удалить</a>").insertBefore(this);
	  jQuery.each(newObject, changeAttributes)
	  $("a.del").click(delSoftware)
	  return false
	}
	
	function changeAttributes(i){
	    $(newObject + "select").attr(name, 'what' + i)
	    $(newObject + "input").attr(name, 'reg_num' + i)
	}

Цитата:

$('что-то').attr(name, 'what' + ind)

Или если сделать с нарашивание ind, то тоже не работает.

var i = 0
    function addSoftware() {    
	  var newObj = $("p.software:first").clone(true).append("&nbsp;&nbsp;<a class='del' href=''>удалить</a>").insertBefore(this);  
	  i++
	  $(newObj + "select").attr(name, 'what' + i)
	  $(newObj + "input").attr(name, 'reg_num' + i)
	  $("a.del").click(delSoftware)
	  return false
	}

Подскажите пожалуйста, как верно написать…

newObj.find("select").attr(name, 'what' + i);

micscr, благодарю. Только свойство name нужно указать в кавычках.