Получение JQuery для работы с динамическим контентом

Question

Я в настоящее время использую очень похожий запрос AJAX пост во многих частях моей страницы:

$(document).ready(function() { 
    $("#name").change(function(e){ 
     var vname = $("#name").val(); 
     $.post("addit.php", {name:vname}, function(response, status) { 
      $("#table").html(response); 
     }); 
    }); 
}); 

Приведенный выше код работает отлично.

У меня возникли проблемы с получением любой функциональности с динамически загружаемым контентом. Так, например, форма, захваченная вызовом AJAX и помещенная на мою страницу, это не работает.

Если мы можем притвориться, что у меня был такой же вызов AJAX, как и выше, но и на динамически загружаемый контент из скрипта PHP с использованием AJAX. как бы выглядел мой призыв. #table - это статический элемент, который всегда присутствует на странице.

Я попытался это, но он не работает:

$(document).ready(function() { 
    $("#table").on("click", "#btn1", function(e){ 
     e.preventDefault(); 
     var vname = $("#name").val(); 
     $.post("addit.php", {name:vname}, function(response, status) { 
      $("#table").html(response); 
     }); 
    }); 
}); 

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

Является ли это я здесь правильным?

HTML, будет выглядеть следующим образом: вторит из PHP:

<table id='table'>//this is the static element form is echoed 
<form method='post'> 
<input id='name' name = 'name'> 
<button id='btn1' type='submit'>Add me</button> 
</form> 

</table> 

Я изменил мой код слегка нажмите на кнопку, а не на изменения.

Answer 1

Я думаю, ваша проблема в том, что вы пропустите

$(document).ajaxComplete(function() { "script here will run and be available after ajax load" }); 

Answer 2

Попробуйте обновить код со следующими

$(document).ready(function() { 
    $("#table #btn1").on("click", function(e){ 
     e.preventDefault(); 
     var vname = $("#name").val(); 
     $.post("addit.php", {name:vname}, function(response, status) { 
      $("#table").html(response); 
     }); 
    }); 
}); 

Это не представляется возможным установить функцию на динамически добавленного элемента, когда элемент нет в документе

И вместо <table><div> если возможно