Question

I have a page that has a button on it. When the user clicks the button it dynamically render’s a form (ie it’s not just showing a hidden form.. it’s completely creating it using jQuery).

My issue is the newly created form doesn’t respond to any jQuery commands. This is the code I have for the rendered form at the moment.

$("#savenewlang").click(function(e) {
    console.log("savenewlang has been clicked");
});

So it should just console.log when they click the submit button but it’s not running.

Any idea how to reload the DOM or assign that an actual event that correctly fires?

Answer 1

$("#container").on('click', '#savenewlang', function(e) {
    console.log("savenewlang has been clicked");
});

Here #container points to a parent element of #savenewlang that belongs to DOM at page load.

---

To specify this event .on() you need three arguments

.on(eventName, target, callback);

But for ordinary binding it only needs two arguments

.on(eventName, callback);

Read more about .on()

---

Remainder

Put all of your code within

$(document).ready(function() {

});

in short

$(function() {

});