在表单中使用AJAX/Javascript，然后提交它

我是一名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添加它，它不会发现表单存在

---

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

使用快捷事件处理程序（例如

submit（）

或

click（）

）仅适用于页面加载时放置在DOM中的元素

对于动态添加的元素，需要对jQuery 1.7+使用

delegate（）

，或

on（）

。试试这个：

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

---

使用快捷方式事件处理程序（例如

submit（）

或

click（）

）仅适用于页面加载时放置在DOM中的元素

对于动态添加的元素，需要对jQuery 1.7+使用

delegate（）

，或

on（）

。试试这个：

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

---

除了Rory McCrossan所说的，帮自己一个忙，使用客户端HTML模板，而不是一点一点地构建HTML字符串，然后使用jQuery对其进行操作，以更改需要更改的数据。除了Rory McCrossan所说的，帮你自己一个忙，像这样使用客户端HTML模板，而不是一点一点地构建HTML字符串，然后使用jQuery对其进行操作，以更改需要更改的数据。也可以使用jQuery的

.live（）

方法来完成上述操作，但由于此处描述的问题，不建议使用此方法：@Vivek

live（）

在任何情况下都不应再使用。甚至在它被弃用之前，它的使用就被

delegate（）

所取代，因为它的性能要好得多。@rorymcrossan-hmm！！！感谢您的澄清，很高兴有ppl lyk u在场：）也可以使用jQuery的

.live（）

方法完成上述操作，但由于此处描述的问题，不建议使用此方法：@Vivek

live（）

在任何情况下都不应再使用。甚至在它被弃用之前，它的使用就被

delegate（）

所取代，因为它的性能要好得多。@rorymcrossan-hmm！！！感谢您的澄清，很高兴有ppl lyk u在场：）