replaceWith() и вторая функция jQuery

Question

Я довольно новичок в jquery, но я пытаюсь сделать следующее: Нажмите ссылку, заменитеWith() форму и щелкните submit в форме, запускающей вторую функцию jquery и ajax и другой replaceWith().

Эти две функции

$(function addtop10fromuserpage() { 
    $(".addshowtotop10").click(function() { 
     var button = $(this); 
     button.replaceWith('<form><input class="addtop10userinput" type="text" name="seriesname" /><input type="submit" class="button small addtop10usersubmit" value="Add" /></form>'); 
    }); 
}); 


$(function addtop10fromuserpageshowadd() { 
    $(".addtop10usersubmit").click(function() { 
     var button = $(this); 

     var position = button.closest(".top-rating").find(".top-rating-text").html(); 
     alert('position'); 
    }); 
}); 

Bascially, обе функции прекрасно, если они называются отдельно, но если я называю вторую функцию от формы ReplaceWith, он не работает. Почему это?

Спасибо.

Answer 1

Поскольку элементы создаются динамически необходимо использовать обработчик на основе делегирования событий

$(function addtop10fromuserpage() { 
    $(document).on('click', ".addshowtotop10", function() { 
     var button = $(this); 
     button.replaceWith('<form><input class="addtop10userinput" type="text" name="seriesname" /><input type="submit" class="button small addtop10usersubmit" value="Add" /></form>'); 
    }); 
}); 


$(function addtop10fromuserpageshowadd() { 
    $(document).on('click', ".addtop10usersubmit", function() { 
     var button = $(this); 

     var position = button.closest(".top-rating").find(".top-rating-text").html(); 
     alert('position'); 
    }); 
});