Как заставить скрипт увидеть форму на странице?

Question

[leouix]

Товарищи, помогите с вопросом! Есть кнопка, которая добавляет форму на страницу, выглядит так:

<input id="plus-plus-add" type="submit" name="add" value="Добавить">
<div id="plus-plus-wrap"></div>

Добавляет форму так:

$("#plus-plus-add").click(function(){
	$("#plus-plus-wrap").append("<form id='plus-plus-form' action='' method='POST'><textarea></textarea><input id='plus-plus-remove' type='submit' name='remove' value='Убрать'></form>");
});

С формой добавляется кнопка, по которой эту форму надо бы удалить. Выглядит код таким образом:

$("#plus-plus-form").submit(function(event){
     event.preventDefault();  
});

$("#plus-plus-remove").click(function(){
	$(this).parents("form").remove();
});

Но по кнопке происходит отправка формы, хотя не должна. Если форму вставить не скриптом, а прописать ее в html, то все удаляется нормально. Как так? И как сделать, чтобы работало????

Answer 1

[mahmudchon]

$(document).on("click", "#plus-plus-remove", function(){
  $(this).parents("form").remove();
});

Потому что добавили уже после.

Comments

[leouix]

Круто! Я так и понял, что потому что добавил уже после. А так почему срабатывает, можете объяснить?

[Moses Fender]

leouix, Потому что слушатель события вешается при создании Element'а. Когда создаёшь новый элемент в документе динамически, нужно инициализировать слушателя. Поэтому mahmudchon весьма логично предложил делегировать слушателя документу. В этом случае гарантированно документ слушает события, и по селектору определяет о чём речь.