Question

我是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添加它，它不会接受表单存在。

我应该如何解决这个问题？

Answer 1

使用快捷事件处理程序（例如，submit()或click()）仅适用于页面加载时放置在DOM中的元素。

对于动态添加的元素，对于jQuery 1.7+，您需要使用delegate()或on()。试试这个：

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