AJAX/Javascript In a Form and then submit it

Question

I'm php developer starting to get heavier into ajax and I've come across a problem I am not sure how to solve.

I am creating a form on the fly like this:

function addSearchResult(label, tz) {
    var html = '';
    html += '<div>'
    html += '<form id="product-form" >';
    html += '<div class="clock">'
    html += '<div class="hour"></div>'
    html += '<div class="min"></div>'
    html += '<div class="sec"></div>'
    html += '<input type="text" id="label" name="Label" placeholder="Label">'
    html += '</div>'
    html += '<div class="city">GMT</div>'
    html += '<a href="#" class="whiteButton submit" id="view-product-button" >View</a>'
    html += '</form>'
    html += '</div>'
    var insert = $(html);
    $('#search-results').append(insert.data('tz_offset', tz).find('.city').html(label).end());
}

And I am reading the form results like this:

$('#product-form').submit(function() {
    alert('OK');
    addProduct('Test Value', 'Test Produlct');
    $('input').blur();
    $('#add .cancel').click();
    this.reset();
    return false;
});

The problem is, it does not work. If I put the form directly in the html it works fine. But adding it through ajax, it will not pick up that the form exist.

How should I go about solving this problem?

Answer 1

Using the shortcut event handlers (eg submit() or click() ) only works for elements which are placed in the DOM on page load.

For dynamically added elements, you need to use delegate() , or on() for jQuery 1.7+. Try this:

< jQ 1.7

$('#search-results').delegate('#product-form', 'submit', function() {
    // rest of your code
});

jQ 1.7+

$('#search-results').on('submit', '#product-form', function() {
    // rest of your code
});