我无法再次单击删除或添加按钮 - I can not click again remove or add button

I can not click again remove or add button

本文关键字：删除添加按钮单击 | 更新日期: 2023-09-27

我想为我的网站创建一个来自有序列表的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>

对动态添加的元素使用on函数。

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

删除时也是如此。