获取使用jQuerys html（）函数生成的输入值

Question

我有一个带有表格的页面，当我单击“编辑”时，我使用jQuerys html（）函数将表格元素更改为输入。

然后，我想让用户编辑输入的值并将其保存到数据库，问题是当我尝试获取对于使用html（）函数创建的所有输入都未定义的数据时。

我敢肯定这与此有关。任何帮助都将是很大的！ 这是我的代码：

$('[name="edit"]').click(function(e) {
    e.preventDefault();
    var data = {
        'invoice_number': $(this).attr('data-invoice-number'),
        'count': $(this).attr('data-count')
    };

    var description_text = $('[data-description-' + data.count).text();
    var rates_text = $('[data-rates-' + data.count).text();
    var quantity_text = $('[data-quantity-' + data.count).text();

    console.log(description_text);

    $('[data-description-' + data.count + ']').html('<input type="text" name="description" value="' + description_text + '" />');
    $('[data-rates-' + data.count + ']').html('<input type="text" name="rates" value="' + rates_text + '" />');
    $('[data-quantity-' + data.count + ']').html('<input type="text" name="quantity" value="' + quantity_text + '" />');
    $(this).css('display', 'none');
    $('[name="save"][data-count=' + data.count + ']').css('display', 'inline-block');
    $('[name="cancel"][data-count=' + data.count + ']').css('display', 'inline-block');

});
$('[name="save"]').unbind().bind().click(function(e) {

    e.preventDefault();
    var data = {
        'invoice_number': $('[name="save"]').attr('data-invoice-number'),
        'description': $('[name="description"]').val(),
        'rates': $('[name="rates"]').val(),
        'quantity': $('[name="quantity"]').val(),
    };

    console.log(data); // this outputs undefined for values above generated using html() method

    if (data.description == '') {
        append_alert('danger', 'Please enter a <b>Description</b>');
    } else if (data.rates == '') {
        append_alert('danger', 'Please enter your <b>Rates</b>');
    } else if (data.quantity == '') {
        append_alert('danger', 'Please enter a <b>Quantity</b>');
    } else {
        $.post('edit_invoice_item', data, function() {}).done(function() {
            append_alert('success', 'Item Edited!');
            setTimeout(function() {
                location.reload();
            }, 2000)
        });
    }
});

问候

Answer 1

对于动态添加的元素，请使用event delegation

更改

$('[name="edit"]').click(function(e) {

至

$(document).on('click', '[name="edit"]', function(e) {

和

$('[name="save"]').unbind().bind().click(function(e) {

至

$(document).on('click', '[name="save"]', function(e) {