Getting jquery to work with dynamic content

Question

I am currently using a very similar AJAX post request across many parts of my page:

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

The above code works perfectly.

I am having a problem getting any functionality with dynamically loaded content. So for example a form grabbed by an AJAX call and put into my page this above does not work.

If we can pretend that I was running the same AJAX call as above but on dynamically loaded content from a PHP script using AJAX. what would my call look like. #table is a static element that is always present on the page.

I have tried this but it is not working:

$(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);
        });
    });
});

Currently I am getting nothing show up on console and it just does not work.

Is what I am doing here correct?

The html would look like this: echoed from 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>

I have changed my code slightly click on button rather than on change.

Have you tried creating elements manually `var el = $("
Some text
");` and then appending them to an existent DOM element `$("#table").append( el );` instead of just modifying the HTML directly? I believe changing the whole HTML inside an element will break the DOM tree. — Alejandro Iván, Feb 10 '15 at 06:43
Refer to this link http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements — Raghav, Feb 10 '15 at 06:46

Lepanto · Answer 1 · 2015-02-10T08:31:01.460

0

Try updating the code with following

$(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);
        });
    });
});

It is not possible to set a function on a dynamically added element, when the element is not there in document

And instead of <table> use <div> if possible

edited Feb 10 '15 at 08:31

answered Feb 10 '15 at 08:24

Lepanto

1,413
1
8
15

will it be able to find my input with this method? I will try – Creaven Feb 10 '15 at 09:05

score -1 · Accepted Answer · answered Feb 10 '15 at 06:20

-1

I think your problem is that you miss

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

answered Feb 10 '15 at 06:20

ClassyPimp

715
7
20

I shouldnt always pay attention to down votes will this work every time ajax is loaded? – Creaven Feb 10 '15 at 09:28
yes, one above will trigger globally. below will trigger for distinct ajax call. $.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle the complete event } // ...... }); *source http://api.jquery.com/Ajax_Events/ – ClassyPimp Feb 10 '15 at 10:05

Getting jquery to work with dynamic content

2 Answers2