Question

Solution:

Thanks to Shmiddty, I figured this out:

$( static parent element ).on('submit', '#add_client', function(e) {
    e.preventDefault();
    firm.addUser( $(this), '/ci/firm/add_client', 'client' );
});

Description:

I building some forms for a client. I want this form to be dynamically created depending on the link he clicks. This form is going to be auto-populated with some data.

Here is the jQuery that will create the dynamic content:

$('.create').on('click', function(e) {
    e.preventDefault();
    utility.create_modal(); // dynamic div with form
});

This is the function that creates the div and place the PHP form in the html:

$(document.createElement('div')).attr({
    'class' : 'span3'
}).html( create_div( '/ci/firm/return_user_form/client', 'html' ) ),

Here is the ajax function:

var result = '';
$.ajax({
    url: path, 
    type: 'get', 
     dataType: type,
     async : false,
     success: function(data) {
         result = data;
     } 
    });
return result;

This is the html that is pulled from the PHP file: (it’s a huge form, i’m just going to include the button in question)

<input type="submit" name="submit" value="Add Client"  id="add_client">

Problem:

This dynamic html content has a form in it. I want to place a JavaScript event ON the form that I included. Is this possible? If so, how can I do it?

This does not work (#add_client is the id of the button in the form):

$('#add_client').on('click', function(e) {
    e.preventDefault();
});

Answer 1

$('some_parent_selector').on('click', '#add_client', function(e) {
    e.preventDefault();
});

The on listener needs a parent object (that is not dynamic) to listen for a click event that bubbles up. Then, when the event bubbles up to the parent, it determines whether or not it originated from '#add_client', and if it does, it calls your anonymous function.