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