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

Question

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>我不知道我的代码哪里错了。我想添加一个新行，但添加按钮显示以添加一个新行。

Answer 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("");

});

Answer 2

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

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

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