AJAX / Javascript в форме, а затем отправить его - PullRequest
Новая
       15

AJAX / Javascript в форме, а затем отправить его

0 голосов
/ 19 февраля 2012

Я php-разработчик, начинающий становиться все тяжелее в ajax, и я столкнулся с проблемой, которую я не знаю, как решить.

Я создаю форму на лету так:

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

И я читаю результаты формы так: 

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

Проблема в том, что она не работает.Если я поместил форму непосредственно в HTML, он работает нормально.Но добавив его через ajax, он не поймет, что форма существует.

Как мне решить эту проблему?

1 Ответ

3 голосов
/ 19 февраля 2012

Использование обработчиков событий ярлыка (например, submit() или click()) работает только для элементов, которые помещаются в DOM при загрузке страницы.

Для динамически добавляемых элементов вам нужно использовать delegate() или on() для jQuery 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
});
...