我不能再次点击删除或添加按钮

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

删除相同。