.click() не работает с определенным индексом

Question

Я создаю динамическое меню, в котором я могу добавить и удалить новую форму.

<input type="button" value="generate form" id="test"/> 
<div id="form1"></div> 

<script> 
$(document).ready(function() { 
    $("#test").click(function() {  
     $("#form1").append("<select id='score-attempt'><option value='penalty'>penalty</option></select><input type='button' value='remove' id='remove'/><br>"); 
    }); 

    $("#form1 #remove").click(function() {  
     alert($(this).index()); 
    }); 
}); 

Проблема заключается в том, что при нажатии на Вытащите никогда не вызывает окно предупреждения.

Благодаря

Answer 1

Проблема состоит в том, что элемент добавляется позже, и не существует, когда дом будет загружен. Поэтому событие click должно быть делегировано из уже существующего элемента, например. как это:

$(document).on("click", "#remove", function(){ 
    alert($(this).index()); 
}); 

Вместо $(document) любой другой статический родительский элемент может использоваться для делегирования событий, только в качестве примера.

Обновить комментарии: как указано, $(document) только как пример. Я также предпочел бы использовать $ ("# form1") здесь, как предложил mithunsatheesh.

И для справки: https://api.jquery.com/on/#on-events-selector-data-handler, раздел «Прямые и делегированные события»:

«обработчики событий привязанные только выбранные в данный момент элементы, они должны существовать на странице в то время ваш код делает вызов to .on(). "

Обновление для правильного индекса: вы получите правильный индекс, например.

$("#form1").on("click", ".remove", function(){  
    alert($(".remove").index($(this))); 
}); 

с корректировкой, чтобы использовать remove как класс вместо id для кнопки удаления. Идентификаторы должны быть уникальными, поэтому классы - лучшее решение. index() начинает отсчет с 0, поэтому вы получите 0 для первого.

Как рабочий пример: Fiddle

Answer 2

Вам нужно добавить обработчик событий на вашем #form1 вход с #remove.

here, here и here.

Работает jsfiddle для вас.