执行jquery函数后，HTML元素消失

Question

我有一个由按钮触发的jquery函数，它将从模态内的值替换表中的html元素

这是我的jquery函数

$('#edit_item_row').click(function () {
    var category_id = $('#edit_category').val(),
        category_text = $('#edit_category option:selected').text(),
        item,
        item_text,
        quantity = parseInt(document.getElementById('edit_quantity').value),
        unit = document.getElementById('edit_unit').value,
        price = parseFloat(document.getElementById('edit_price').value).toFixed(2),
        jan = parseInt(document.getElementById('edit_jan').value),
        feb = parseInt(document.getElementById('edit_feb').value),
        mar = parseInt(document.getElementById('edit_mar').value),
        apr = parseInt(document.getElementById('edit_apr').value),
        may = parseInt(document.getElementById('edit_may').value),
        jun = parseInt(document.getElementById('edit_jun').value),
        jul = parseInt(document.getElementById('edit_jul').value),
        aug = parseInt(document.getElementById('edit_aug').value),
        sep = parseInt(document.getElementById('edit_sep').value),
        oct = parseInt(document.getElementById('edit_oct').value),
        nov = parseInt(document.getElementById('edit_nov').value),
        dec = parseInt(document.getElementById('edit_dec').value),
        subtotal = parseFloat(quantity * price).toFixed(2),
        numberId = $('#edit_row').val(),
        total = 0;

    var total_qty = jan + feb + mar + apr + may + jun + jul + aug + sep + oct + nov + dec;

    if (!$('#tablebody').is(':empty')) {
        $('#tablebody tr').each(function () {
            if (!$('#subtotal' + numberId)) {
                total += parseFloat($(this).find(".subtotals").html()).toFixed(2);
            }
        });
    }
    total += parseFloat(subtotal).toFixed(2);

    if (category_id == null) {
        alert('Please select a category');
    }
    else if (item == "") {
        alert('Please input an item specification');
    }
    else if (quantity == 0) {
        alert('Please enter the item quantity.');
    }
    else if (price == 0) {
        alert('Please enter the item price');
    }
    else if (quantity != total_qty) {
        alert('Please distribute the quantities properly');
    }
    else if (budget < total) {
        alert('Your office does not have enough budget for this purchase.');
    }
    else {
        //IF THE CATEGORY IS INFRASTRUCTURE OR CONSULTANCY
        if ((category_id == 1) || (category_id == 4)) {
            item_text = $('#edit_item').val();
        }
            //ELSE IF THE CATEGORY IS GOODS AND SERVICES
        else if (category_id == 2) {
            item_text = $('#edit_item option:selected').text();
        }
            //ELSE IF THE CATEGORY IS SEMINARS
        else {
            item_text = $('#edit_subcategory option:selected').text();
        }
        //REPLACE THE VALUES OF THE HIDDEN INPUT FIELDS
        $('#category_input' + numberId).val(category_id);
        $('#item_input' + numberId).val(item_text);
        $('#quantity_input' + numberId).val(quantity);
        $('#unit_input' + numberId).val(unit);
        $('#price_input' + numberId).val(price);
        $('#jan_input' + numberId).val(jan);
        $('#feb_input' + numberId).val(feb);
        $('#mar_input' + numberId).val(mar);
        $('#apr_input' + numberId).val(apr);
        $('#may_input' + numberId).val(may);
        $('#jun_input' + numberId).val(jun);
        $('#jul_input' + numberId).val(jul);
        $('#aug_input' + numberId).val(aug);
        $('#sep_input' + numberId).val(sep);
        $('#oct_input' + numberId).val(oct);
        $('#nov_input' + numberId).val(nov);
        $('#dec_input' + numberId).val(dec);

        //REPLACE THE TD TEXTS
        $('#category' + numberId).html(category_text);
        $('#item' + numberId).html(item_text);
        $('#quantity' + numberId).html(quantity);
        $('#unit' + numberId).html(unit);
        $('#price' + numberId).html(price);
        $('#jan' + numberId).html(jan);
        $('#feb' + numberId).html(feb);
        $('#mar' + numberId).html(mar);
        $('#apr' + numberId).html(apr);
        $('#may' + numberId).html(may);
        $('#jun' + numberId).html(jun);
        $('#jul' + numberId).html(jul);
        $('#aug' + numberId).html(aug);
        $('#sep' + numberId).html(sep);
        $('#oct' + numberId).html(oct);
        $('#nov' + numberId).html(nov);
        $('#dec' + numberId).html(dec);
        $('#subtotal' + numberId).html(subtotal);
        $('#create_total').html(parseFloat(total).toFixed(2));

        $('#edit_item_modal').modal('hide');
    }
});

但是当我检查元素

时，所有带有此ID的元素都会消失

$('#category_input' + numberId).val(category_id);
$('#item_input' + numberId).val(item_text);
$('#quantity_input' + numberId).val(quantity);
$('#unit_input' + numberId).val(unit);
$('#price_input' + numberId).val(price);
$('#jan_input' + numberId).val(jan);
$('#feb_input' + numberId).val(feb);
$('#mar_input' + numberId).val(mar);
$('#apr_input' + numberId).val(apr);
$('#may_input' + numberId).val(may);
$('#jun_input' + numberId).val(jun);
$('#jul_input' + numberId).val(jul);
$('#aug_input' + numberId).val(aug);
$('#sep_input' + numberId).val(sep);
$('#oct_input' + numberId).val(oct);
$('#nov_input' + numberId).val(nov);
$('#dec_input' + numberId).val(dec);

我不知道造成它的原因。感谢您的帮助。

更新1

我尝试使用

<td>
  <p id="category'+ numberId +'">Text</p>
  <input id="input_category'+ numberId +'" class="hidden" />
</td>

而不是

<td id="category'+ numberId +'">
  <p>Text</p>
  <input id="input_category'+ numberId +'" class="hidden" />
</td>

因为.html()替换了元素中的所有html元素。

这解决了我的问题。