时间戳

首页 > 解决方案 > 如何防止在表格中多次追加，一旦它强制使用Jquery双击表格行多次？

javascript - 如何防止在表格中多次追加，一旦它强制使用Jquery双击表格行多次？

问题描述

我有模块将响应结果附加到另一个表。期待我在我的模块中找到了一个解决方案。但是我发现了问题，我会给你们一个场景它的问题。

第一个场景：用户将选择他想要点击的调味品，期待前。用户 1 选择第二个表行，即 Condiments *LG FRIES。

第一个场景

第二个场景：在第一个场景中，用户选择*LG FRIES，如您所见，模态将打开，响应结果将附加到表 B 中。

第二场

第三个场景：第一个和第二个场景看起来很有效，但是在这里我将向您展示，一旦我强制双击*LG FRIES的表格行，追加将如何在表格中成倍增加。

第三场

所以现在我会让你展示我的代码。

这是我的函数，用于获取单击表行的结果，然后结果将附加到表 B。

$('table#noun_chaining_order').on('click','tr.editCondiments',function(e){



    var allow_to_open_condiments_conditional =  $(this).closest("tr").find(".allow_to_open_condiments_conditional").text();


    if(allow_to_open_condiments_conditional == 'Yes') {

        $('.conditional_table_hidden_noun').hide();

        $('.conditional_table_hidden_condiments').show();

        $('table#noun_chaining_order tr').removeClass('selected');

        $(this).addClass('selected');



        var find_each_id_condiments = $(this).find('td.condi_section_id').text();
         $("table#customer_table_update_chain_order tbody").html('');

        $('#customer_modal_update_chain_order').modal('show');

         $.ajax({
          url:'/get_each_id_section_condiments',
          type:'get',
          data:{find_each_id_condiments:find_each_id_condiments},
          success:function(response){

            var get_each_section = response[0].condiments_table;


            $.each(get_each_section, function (index, el) {

               var stringify = jQuery.parseJSON(JSON.stringify(el));


              var cat_condi_screen_name = stringify['cat_condi_screen_name'];
              var cat_condi_price = stringify['cat_condi_price'];
              var cat_condi_image = stringify['cat_condi_image'];
              var image = '<img src=/storage/' + cat_condi_image + ' class="responsive-img" style="width:100px;">';

              // $('#edit_chainingBuild').append("<tr class='clickable-row'><td>" + Qty + "</td><td class='clickable-row-condiments'>" + Condiments + "</td><td>" + Price + "</td><td style='display:none;' data-attribute-chain-id="+menu_builder_details_id +" class='data-attribute-chain-id'>"+menu_builder_details_id+"</td></tr>");

              $('table#customer_table_update_chain_order tbody').append("<tr class='edit_condimentsClicked' style='font-size:14px; border:none;'><td class='edit_condimentsScreenNameClicked'>" + cat_condi_screen_name + "</td><td class='edit_condimentsScreenPriced'>" + cat_condi_price + "</td><td>"+image+"</td></tr>");

            });



          },
          error:function(response){
            console.log(response);
          }
        });

    }
    else
    {

    }

});

所以问题是，一旦我强制双击表格行，如何停止多次附加？

标签： javascriptjquery

解决方案

我在这里看到了简单的解决方案。

  1. 当您附加购物车项目时，您可以将该项目 ID 从数据库添加到元素。并且在附加之前检查响应中的项目是否在 BODY 中不存在。
  2. 另一种解决方案是在您单击附加后 - 隐藏该 CTA（按钮）以防止再次单击。
  3. 检查您的数据库中的多条记录。

无论如何，请检查您何时执行 ajax 请求？点击后？

您是否尝试过使用断点调试代码？还是控制台？

推荐阅读