Question

我有以下代码想要删除并将元素添加回jQuery中的DOM：

var pm_container = $(document).find('.pm-container');

$(document).on('change', '#payment-form .cat_field', function(){
    displayPrice($(this), pm_container);
});

function displayPrice(elem, pm_container){
    $.ajax({
        type: 'GET',
        url: 'getamount.php',
        dataType: 'json',
        cache: false,
        success: function (data) {
            var amount_field = $(document).find('#payment-form #amount');

            amount_field.val(data.price);

            if(amount_field.val() == 0) {
                $(document).find('.pm-container').remove();
            } else {
                $(document).find('.save-listing').prev(pm_container);
            }
        }
    });
}

由于某些原因，当 amount_field 的值不等于零时，我的元素 .pm-container 不会重新添加到我的页面中。

知道为什么吗？

感谢您的帮助。

Answer 1

删除元素后，它就消失了。没有办法把它找回来。一种解决方案是将元素克隆到变量中，并稍后可以重用：

var pm_container = $(document).find('.pm-container').clone();

$(document).on('change', '#payment-form .cat_field', function(){
displayPrice($(this), pm_container); });

function displayPrice(elem, pm_container){
$.ajax({
    type: 'GET',
    url: 'getamount.php',
    dataType: 'json',
    cache: false,
    success: function (data) {
        var amount_field = $(document).find('#payment-form #amount');

        amount_field.val(data.price);

        if(amount_field.val() == 0) {
            $(document).find('.pm-container').remove();
        } else {
            $(document).find('.save-listing').prepend(pm_container);
        }
    }
}); }

但是，对于您的情况，最好的方法可能是隐藏并显示元素：

$(document).on('change', '#payment-form .cat_field', function(){
displayPrice($(this)); });

function displayPrice(elem){
$.ajax({
    type: 'GET',
    url: 'getamount.php',
    dataType: 'json',
    cache: false,
    success: function (data) {
        var amount_field = $(document).find('#payment-form #amount');

        amount_field.val(data.price);

        if(amount_field.val() == 0) {
            $(document).find('.pm-container').hide();
        } else {
            $(document).find('. pm-container').show();
        }
    }
}); }

Answer 2

首先在ajax函数外部为克隆.pm-container创建一个变量

注意*：：当您使用.remove（）时，无法将其取回。

var container = $(".pm-container").clone();

然后在您的Ajax函数中

if (amount_field.val() == 0) {
  $(".pm-container").detach();
} else {
  container.insertBefore($(".save-listing"));
}

jsfiddle：https://jsfiddle.net/marksalvania/3h7eLgp1/

将删除的元素添加回DOM jQuery 2

2 个答案: