もう一度クリックして削除または追加ボタンをクリックすることはできません

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

動的に追加された要素に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(); 
}); 
}); 

と同じです。