显示数据后添加按钮不显示答案

【问题标题】：Add button not show after show data显示数据后添加按钮不显示
【发布时间】：2019-09-13 06:50:41
【问题描述】：

ajax 成功后，数据按行显示，但如果我想在那时添加新行，则添加按钮不显示。

我的代码：

  <div class="row">
     <div class="col-12">
      <h3>Add Video Detail</h3>
       <form id="insertvideo" method="post">
       <table id="addrow" width="100%">
        <td><input type="button" class="btn btn-success addButton col-3 offset-1" value="add"/></td>
          <tr class="clonetr">
                <td>Video Title<input type="text" id="videotitle" name="videotitle[]" class="form-control"></td>
                <td>Video description<input type="text"  id="videodesc" name="videodesc[]" class="form-control"></td>
                <td>Video Links<input type="text"  id="videolink" name="videolink[]" class="form-control"></td>
                <td><input type="button" class="btn btn-danger deleteButton" value="delete"/></td>
          </tr>
       </table>
       </form>  
     </div>
   </div>
   <div class="col-sm-6" style="margin-top: 13px; margin-left: 400px;">
       <button type="submit" id="btn-update"   value="Submit" class="btn btn-primary col-3 offset-1">Save</button>
   </div>

  <script>
      $(function(){
        $(".addButton").click(function(){
            $('.clonetr:last').clone(true).appendTo("#addrow");
        });

        $(".deleteButton").click(function(){
            if($('.deleteButton').length > 1)

               $(this).closest("tr").remove();
            else
                alert('Atleast one required.');

        });
    });
   var mainCatId = $(this).val();
       $.ajax({
                url: "<?php echo base_url();?>admin_controller/WebsiteContentController/fetchSubDetail",
                type: "POST",
                data: {mainCatId:mainCatId},
                dataType:'html',
                success: function(response)
                {
                    $('#addrow').html(response);
                    console.log(response);
                }
             });

   </script>

我不知道我的代码哪里错了。我想添加一个新行，但添加按钮显示以添加一个新行。

【问题讨论】：

您的 html 错误，您不应该在 <table> 中直接包含 <td>，它应该是 <table><tbody><tr><td> 或 <table><tr><td>
在您的回复中，您使用$('#addrow').html(response);，这意味着您替换了表格的全部内容。这就是您的添加按钮被删除的原因。
@CarstenLøvboAndersen 如何显示add 按钮

标签： javascript php jquery ajax codeigniter

【解决方案1】：

由于我无法运行您的 ajax，这只是对如何修复它的猜测。

首先，通过添加缺少的<tr> 来修复表格：

<table id="addrow" width="100%">
  <tr>
    <td><input type="button" class="btn btn-success addButton col-3 offset-1" value="add" /></td>
  </tr>
  <tr class="clonetr">
    <td>Video Title<input type="text" id="videotitle" name="videotitle[]" class="form-control"></td>
    <td>Video description<input type="text" id="videodesc" name="videodesc[]" class="form-control"></td>
    <td>Video Links<input type="text" id="videolink" name="videolink[]" class="form-control"></td>
    <td><input type="button" class="btn btn-danger deleteButton" value="delete" /></td>
  </tr>
</table>

现在要清除表格，但保留添加按钮：

$('#addrow tr:not(:first)').remove();
$('#addrow').append(response);

所以现在看起来像：

$.ajax({
    url: "<?php echo base_url();?>admin_controller/WebsiteContentController/fetchSubDetail",
    type: "POST",
    data: {mainCatId:mainCatId},
    dataType:'html',
    success: function(response)
    {
        $('#addrow tr:not(:first)').remove();
        $('#addrow').append(response);
        console.log(response);
    }
});

要清除新创建的行，请尝试：

$(".addButton").click(function(){
    $('.clonetr:last').clone(true).appendTo("#addrow");
    $("#addrow tr:last input").val("");
});

【讨论】：

Lovbo Andersen 它添加了行但不是空白，它显示了最后一行数据。
@farhantechno 你的回复是什么样的？
Lovbo Andersen 我上传了一张新图片
点击add按钮后，我的第三行显示之前的数据。

【解决方案2】：

// addd for Vendor Origin in admin zone
 $(".addorigin").on("click", function (e){
    $('.origintable tr:last').before('<tr class="origindiv">                            <td >   <input type="text"  /><i class="fa fa-question-circle info" data-toggle="tooltip" data-placement="top" title="Sender Number."></i></td><td ><input type="text"  /><i class="fa fa-question-circle info" data-toggle="tooltip" data-placement="top" title="Enter sender name."></i></td> <td><div class="rorigin"><a href="JavaScript:Void(0);" class="removeorigin btn btn-primary-outline btn-xs"><i class="fa fa-minus-circle" aria-hidden="true"></i></a></div></td>                     </tr>');
    });

 //remove row
 $('.origintable').on('click','.removeorigin',function() {
     $(this).closest("tr.origindiv").remove();
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="text-center origintable">
                        <tr class="origindiv">
                            <td >
                            <input type="text" /><i class="fa fa-question-circle info" data-toggle="tooltip" data-placement="top" title="Sender Number."></i>
                            </td>
              <td >
                            <input type="text"  /><i class="fa fa-question-circle info" data-toggle="tooltip" data-placement="top" title="Enter sender name."></i>
                            </td>

                        </tr>
                    </table>
          <a href="javascript:void(0);" class="addorigin btn btn-xs btn-primary-outline"><i class="fa fa-plus-circle"></i> Add More Row</a>

【讨论】：

这并不能解决 OP 的问题，请花点时间仔细阅读问题。 OP 声明，在他使用 ajax 加载数据后，添加按钮被删除。
还有 Ajit，发布包含无效 html 的示例是一种不好的做法，您不能拥有多个具有相同 ID templatename 的元素

【解决方案3】：

在您的 ajax 成功函数中，您添加了这样的代码。

 $('#addrow').html(response);

html() 函数将替换 addrow 元素中的所有内容。因此添加按钮将替换为您的响应数据。请使用单独部分中的添加按钮或添加新容器来附加响应数据。

【讨论】：