我无法再次单击“删除”或“添加”按钮

Question

我想为我的站点创建“从有序列表中Add and Remove按钮。

但是，当我单击添加按钮或删除按钮时，无法再次单击。

<script>
$(document).ready(function () {
  $('.order-lists div #add').click(function(e) {
    $('.order-lists div').removeClass('active');

    var $parent = $(this).parent();
    if (!$parent.hasClass('active')) {
        $parent.addClass('active');

        var DataId = $(this).attr('value');
        var requested = { 'id': DataId }

        $.ajax({
            type: 'POST',
            url: 'config/process/order-lists.php',
            data: requested,
            dataType: 'json',
            encode: true

        }).done(function (data) {
            console.log(data);
            ids = data['mov_id'];
            name = data['mov_name'];
            mov_size = data['mov_size'];

            $.cookie(ids, name);
            $.cookie(name, mov_size);

            $("#" + ids + ' ' + 'a').remove();
            $("#" + ids).append('<a class="btn btn-danger" id="remove" href="javascript:void(0);" value="' + ids + '"> <i class="glyphicon glyphicon-shopping-cart"></i> Remove </a>');
        });
    }
    e.preventDefault();
});

$('.order-lists div #remove').click(function(e) {

    $('.order-lists div').removeClass('remove');

    var $parent = $(this).parent();
    if (!$parent.hasClass('remove')) {
        $parent.addClass('remove');

        var DataId = $(this).attr('value');
        var requested = { 'id': DataId }

        $.ajax({
            type: 'POST',
            url: 'config/process/order-lists.php',
            data: requested,
            dataType: 'json',
            encode: true

        }).done(function (data) {
            console.log(data);
            ids = data['mov_id'];
            name = data['mov_name'];
            mov_size = data['mov_size'];

            $.removeCookie(ids, null);
            $.removeCookie(name, null);

            $("#" + ids + ' ' + 'a').remove();
            $("#" + ids).removeClass('remove');
            $("#" + ids).append('<a class="btn btn-danger" id="add" href="javascript:void(0);" value="' + ids + '"> <i class="glyphicon glyphicon-shopping-cart"></i> Add Order List </a>');

        });
    }

    e.preventDefault();
  });
});
</script>

Answer 1

在功能上用于动态添加的元素。

$(document).ready(function () {
$('.order-lists').on('click', '#add' , function(e) {

$('.order-lists div').removeClass('active');

var $parent = $(this).parent();
if (!$parent.hasClass('active')) {
    $parent.addClass('active');

    var DataId = $(this).attr('value');
    var requested = { 'id': DataId }

    $.ajax({
        type: 'POST',
        url: 'config/process/order-lists.php',
        data: requested,
        dataType: 'json',
        encode: true

    }).done(function (data) {
        console.log(data);
        ids = data['mov_id'];
        name = data['mov_name'];
        mov_size = data['mov_size'];

        $.cookie(ids, name);
        $.cookie(name, mov_size);

        $("#" + ids + ' ' + 'a').remove();
        $("#" + ids).append('<a class="btn btn-danger" id="remove" href="javascript:void(0);" value="' + ids + '"> <i class="glyphicon glyphicon-shopping-cart"></i> Remove </a>');

    });
}

e.preventDefault();
});
});

同样删除。