CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Gustavo
Gustavo

Reputation: 37

I have added HTML code using append, but this new code do not execute javascript anymore

After inserting a code using Ajax , this code does not run the javascript it should be querying as it is identical to the code that had already been written in the page

I am trying to load a page, and update the database using Ajax (working). I have a button that adds a new row to the page (working), in order to add more data to the table Problem is that the new "appended" code does not execute the ajax as the written code does!

this code has been written while I loaded the page <td contenteditable="true" id="comments:99" class="html5">&nbsp;1q33</td>

this is the new code that I added using .append <td contenteditable="true" id="comments:103" class="html5">&nbsp;2</td>

this is the javascript that is triggered on the initial code but it is not working for the .appended one $(':input[class=html5]').change(function () { });

I expected that the almost identical code that I wrote using .append worked similarly to the code I wrote while loading the page.

Upvotes: 2

Views: 61

Answers (3)

sochas
sochas

Reputation: 2501

You need to refer a parent element that exists when you load the page for first time for trigger envents on your dynamically added elements

$('body').on('change', ':input[class=html5]', function() {

});

Upvotes: 1

Adder
Adder

Reputation: 5868

You should use the three parameter version of the on method, it will also apply to HTML that is added later to the document

$(document).on('change', ':input[class=html5]', function () { 
    //...
});

Upvotes: 1

Sonia
Sonia

Reputation: 1919

You can use as below::

$(':input[class=html5]').on("change", function () { });

Upvotes: 1

Related Questions