Невозможно добавить HTML внутри уже добавленного HTML, JQuery дописывания()

Question

я пытаюсь добавить HTML с .append() внутри уже добавлены HTML, но он не будет работать ... Если HTML уже есть (если я не добавлял некоторые), то я могу добавить некоторые из них, но если я добавлю html и попытаюсь добавить некоторый html внутри добавленного html, то это не сработает, и я не получу его ... Надеюсь, что кто-то может помочь мне с этой проблемой. Спасибо. Вот мой код

<div class="add_episodes"> 
    <div class="season_episode"> 
     <input type="text"> 
     <input type="text"> 
     <input type="file" name="episode_image"> 
     <div class="subtitle_out"></div> 
     <div class="btn-addsubtitle">add subtitle</div> 
    </div> 
</div> 
<button id="btn-addepisode">add episode</button> 

$(document).ready(function() { 

    var counter = 1; 

    $("#btn-addepisode").click(function(e) { 
    e.preventDefault(); 
    $(".add_episodes").append('<div class="add_episode_out"><div class="season_episode"><input type="text" placeholder="Episode titel"><input type="text" placeholder="Indtast filnavn på episoden f.eks. orphan_black"><input class="fileextension_movie_season" type="text" placeholder=".mp4" disabled><input type="file" name="episode_image"><div class="subtitle_out"></div><div class="btn-addsubtitle">add subtitle</div><i class="fa fa-trash delete-episode"></i></div></div>'); 
    counter = counter + 1; 
    initRemove(); 
    }); 

    var initRemove = function() { 
    $(".delete-episode").click(function() { 
     $(this).closest('.add_episode_out').find(".season_episode").remove(); 
     counter = counter - 1; 
     if(counter < 1) { 
     counter = 1; 
     } 
    }); 
    } 

}); 

$(document).ready(function() { 

    var counter = 1; 

    $(".btn-addsubtitle").click(function(e) { 
    e.preventDefault(); 
    $(this).closest('.season_episode').find(".subtitle_out").append('<div class="add_subtitle_out"><div class="add_subtitle"><input type="text" placeholder="Undertekstsprog"><i class="fa fa-trash delete-subtitle"></i><h5>Vælg undertekstfil (filtype .vtt)</h5><input type="file"></div></div>'); 
    counter = counter + 1; 
    initRemove(); 
    }); 

    var initRemove = function() { 
    $(".delete-subtitle").click(function() { 
     $(this).closest('.add_subtitle_out').find(".add_subtitle").remove(); 
     counter = counter - 1; 
     if(counter < 1) { 
     counter = 1; 
     } 
    }); 
    } 

}); 

Codepen example here

Answer 1

Просто используйте делегированное событие пути изменения:

$(".btn-addsubtitle").click(function(e) { 

To:

$('.add_episodes').on('click', '.btn-addsubtitle', function(e) { 

Вот как прикрепить обработчик событий к элементам, которые добавляются в DOM после DOM готовы.

.live() | jQuery API Documentation

$ (селектор) .live (события, данные, обработчик); // jQuery 1.3+
$ (document) .delegate (селектор, события, данные, обработчик); // jQuery 1.4.3+
$ (document) .on (события, селектор, данные, обработчик); // JQuery 1.7+

DEMO

And the code can be cleaned up a bit

Answer 2

Это потому, что вы свяжете событие щелчка к элементу на document.ready, но ваш новый элемент создается после этого. Вы должны повторно привязать событие click к вновь созданному элементу или, еще лучше, просто вызвать функцию с помощью кнопки через onclick.

Answer 3

Я думаю, что это происходит потому, что ваш код работает на документ готов. Вместо того, чтобы использовать:

$('body').on("click", '.btn-addsubtitle', function(){ 
alert("hi"); 
}); 

Это должно работать * после * элемент создается