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に配置される要素に対してのみ機能します。

動的に追加される要素については、delegate()またはon()をjQuery 1.7+に使用する必要があります。 HTTP（ロリーMcCrossanが自分に好意を行うと、[ハンドルバー]のようなクライアント側のHTMLテンプレートを使用して、言ったことに加え

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