如何修改此事件以使事件附加到新的DOM元素？

Question

我有一個過程

$('.upload-btn').click(function(e) { 
    e.preventDefault(); 
    var that = this; 
    var image = wp.media({ 
     title: 'Upload Image', 
     multiple: false 
    }).open() 
    .on('select', function(e){ 
     var uploaded_image = image.state().get('selection').first(); 
     var image_url = uploaded_image.toJSON().url; 
     console.log(image_url); // test 
     $(that).siblings('.image-url').val(image_url); 
    }); 

這對在那裏的document負載時upload-btn類元素的作品，但她們很快

var newRowHtml = '<tr><td><input type="text" class="image-url regular-text"><input type="button" class="upload-btn button-secondary" value="Upload Image"></td><td><input type="text" class="image-url regular-text"><input type="button" class="upload-btn button-secondary" value="Upload Image"></td></tr>'; 
function addAnotherSlide() { jQuery('#slide-table-body').append(newRowHtml); } 

創建時不會對這個類的元素工作

我該如何解決這個問題？

Answer 1

使用事件選擇，結合整個文檔捕捉動態添加元素：

$(document).on("click", ".upload-btn", function(e) { 
..... 
});