时间戳

首页 > 解决方案 > Laravel - 使用 AJAX 和 JQUERY 的动态按钮

php - Laravel - 使用 AJAX 和 JQUERY 的动态按钮

问题描述

您好，我想创建一个动态按钮，但我对 ajax 或 jquery 并不熟悉，所以请指导我，我已经运行了这个动态按钮，但我想要的是在添加另一个表单后创建另一个动态按钮。所以这是我的代码。查看我的图片，添加表单后我无法添加另一个文件按钮

这是一张显示我想要的图片，我的问题是动态按钮

我这里有的是表单的设计

 <html>  
      <head>    
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
      </head>  
      <body>  
           <div class="container">  
                <br />  
                <br />  

                <div class="form-group">  
                     <form name="add_name" id="add_name">  
                          <div class="table-responsive">  
                               <table class="table table-bordered" id="dynamic_field">  
                                    <tr>  
                                        <td><input type="text" name="name[]" class="form-control-file" id="exampleFormControlFile1">  

                                        <textarea class="form-control" name="areaName[]" rows="5" id="comment"></textarea>

                                        <input type="file" name="fileName[]" class="form-control-file" id="exampleFormControlFile1"><br>

  <!--I Want to add another File Button after clicking this button--> <button type="button" name="addFile" id="addFile" class="btn btn-success">Add Another Form</button>

                                        </td>  

                                         <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>  

                                    </tr>  
                               </table>  
                               <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />  
                          </div>  
                     </form>  
                </div>  
           </div>  
      </body>  
 </html>

这是 AJAX 代码，它可以帮助程序运行而无需像循环一样刷新和添加表单

    <script>  
 $(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"><td> <input type="text" name="name[]" class="form-control-file" id="exampleFormControlFile1">  <textarea class="form-control" name="areaName[]" rows="5" id="comment"></textarea><input type="file" name="fileName[]" class="form-control-file" id="exampleFormControlFile1"><button type="button" name="addFile" id="addFile" class="btn btn-success">Add Another Form</button></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
      });  
      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });  
      $('#submit').click(function(){            
           $.ajax({  
                method:"POST",  
                data:$('#add_name').serialize(),  
                success:function(data)  
                {  
                     alert(data);  
                     $('#add_name')[0].reset();  
                }  
           });  
      });  
 });  
 </script>

  <script>  
 $(document).ready(function(){  
      var i=1;  
      $('#addFile').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="file" name="fileName[]" class="form-control-file" id="exampleFormControlFile1"></button></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
      });  
      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });   
 });  
 </script>

标签： phpjqueryhtmlarraysajax

解决方案

您应该使用事件委托触发您的事件。见下文-

$(document).ready(function() {
  $(document).on('click', '.add', function() {
    var len = $('.form-row').length;
    $('#dynamic_field').append('<tr class="form-row" data-id="'+len+'"><td> <input type="text" name="name[]" class="form-control-file" id="exampleFormControlFile1">  <textarea class="form-control" name="areaName[]" rows="5" id="comment"></textarea><input type="file" name="fileName[]" class="form-control-file" id="exampleFormControlFile1"><button type="button" name="addFile" id="addFile" class="btn btn-success addFile">Add Another Form</button></td><td><button type="button" name="remove" class="btn btn-danger btn_remove_all">X</button></td></tr>');
  });
  $(document).on('click', '.submit', function() {
    $.ajax({
      method: "POST",
      data: $('#add_name').serialize(),
      success: function(data) {
        alert(data);
        $('#add_name')[0].reset();
      }
    });
  });
  $(document).on('click', '.addFile', function() {
    var id = $(this).closest('.form-row').data('id');
    var elem = '<tr class="'+id+'"><td><input type="file" name="fileName[]" class="form-control-file" id="exampleFormControlFile1"></button></td><td><button type="button" name="remove" class="btn btn-danger btn_remove">X</button></td></tr>';
    $(elem).insertAfter($(this).closest('tr'));
  });
  $(document).on('click', '.btn_remove, .btn_remove_all', function() {
    if($(this).hasClass('btn_remove_all')){
      var id = $(this).closest('.form-row').data('id');
      $('tr.'+id).remove();
    }
    $(this).closest('tr').remove();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>

<body>
  <div class="container">
    <br />
    <br />

    <div class="form-group">
      <form name="add_name" id="add_name">
        <div class="table-responsive">
          <table class="table table-bordered" id="dynamic_field">
            <tr class="form-row">
              <td><input type="text" name="name[]" class="form-control-file" id="exampleFormControlFile1">

                <textarea class="form-control" name="areaName[]" rows="5" id="comment"></textarea>

                <input type="file" name="fileName[]" class="form-control-file" id="exampleFormControlFile1"><br>

                <!--I Want to add another File Button after clicking this button--><button type="button" name="addFile" id="addFile" class="btn btn-success addFile">Add Another Form</button>

              </td>

              <td><button type="button" name="add" id="add" class="btn btn-success add">Add More</button></td>

            </tr>
          </table>
          <input type="button" name="submit" id="submit" class="btn btn-info submit" value="Submit" />
        </div>
      </form>
    </div>
  </div>
</body>

</html>

此外，不要id用于元素上的触发事件，因为它是独一无二的，所以如果元素将被重复，那么事件将不会在其他元素上触发。

推荐阅读