laravel ajax 表单不会执行提交按钮

Question

基本上我的表单通过 javascript 添加到刀片中，然后我可以完成数据并点击保存按钮。

问题是保存按钮不起作用。

Here is screen record of the process and error you can watch

代码

此功能将添加新行和表单以查看您在视频中看到的位置我填充输入并点击保存按钮

var textFieldsCount = 0;

  function addTextField(){
    textFieldsCount++;
    var textfieldhelper = '';
    var my_row = $('<div class="row mt-20" id="textField-' + textFieldsCount + '">');
    var my_html = '{{Form::open()}}<input name="product_id" id="product_id" type="hidden" value="{{$product->id}}"><div class="col-md-4">{{ Form::label('customsubspecifications', 'Specifications') }}<select class="form-control" id="specification_id" name="specification_id"><option value="">Select</option>'+specifications+'</select></div>';
    my_html += '<div class="col-md-4">{{ Form::label('text_dec', 'Your Custom Input') }}'+
    '<input class="text_dec form-control" onkeypress="myFunction()" type="text" name="text_dec[]" id="'+ textFieldsCount.toString() +'">'+
    '</div>';
    my_html += '<div class="col-md-4">{{ Form::label('', 'Actions') }}<br><button type="button" class="btn btn-danger btn-xs" onclick="removeTextField(\'textField-' + textFieldsCount.toString() + '\')">Remove</button><button type="button" class="btn btn-info btn-xs" onclick="addTextField();">Add New</button><button type="button" id="custmodalsave" class="myButton custmodalsave btn btn-xs btn-success">Save</button>{{Form::close()}}</div>';
    my_row.html(my_html);
    $('#fields').append(my_row);
  }

这就是事情发生的地方，我实际上尝试将数据发送到后端

$("#custmodalsave").click(function(e){
      e.preventDefault();
      $.ajax({
        type: "post",
        url: "{{ url('admin/addnewcustomsubspecifications') }}",
        data: {
          '_token': $('input[name=_token]').val(),
          'product_id': $('#product_id').val(),
          'specification_id': $('#specification_id').val(),
          'text_dec': $('.text_dec').val(),
          'longtext_dec': $('.longtext_dec').val(),
        },
        success: function (data) {
          $('#custspacmsg').append('<span class="text-success">Custom Specification added successfully in your product!</span>');
          console.log(data);
        },
        error: function (data) {
          console.log('Error:', data);
        }
      });
});

为了清楚起见，我附上了我的第一个 ajax 代码的输出形式，所以你 可以看到东西是怎么打印出来的

<div class="row mt-20" id="textField-1">

    <form method="POST" action="http://newsite.pp/admin/products/15" accept-charset="UTF-8">
        <input name="_token" value="DLrcOa0eOm90e4aaGSYp2uCeiuKtbGCT9fCOUP16" type="hidden">
        <input name="product_id" id="product_id" value="15" type="hidden">

        <div class="col-md-4">
            <label for="customsubspecifications">Specifications</label>
            <select class="form-control" id="specification_id" name="specification_id">
                <option value="">Select</option>
                <option value="1">CPU</option>
                <option value="2">ram</option>
                <option value="3">LCD</option>
                <option value="4">Mouse</option>
                <option value="5">Graphic</option>
                <option value="6">Keyboard</option>
            </select>
        </div>

        <div class="col-md-4">
            <label for="text_dec">Your Custom Input</label>
            <input class="text_dec form-control" onkeypress="myFunction()" name="text_dec[]" id="1" type="text">
        </div>

        <div class="col-md-4">
            <label for="">Actions</label>
            <br>
            <button type="button" class="btn btn-danger btn-xs" onclick="removeTextField('textField-1')">Remove</button>
            <button type="button" class="btn btn-info btn-xs" onclick="addTextField();">Add New</button>
            <button type="button" id="custmodalsave" class="myButton custmodalsave btn btn-xs btn-success" style="display: inline-block;">Save</button>
        </div>
    </form>

</div>

PS：我应该补充一点，我有这个功能在引导模式上工作 但我想改变你在视频中看到的模式（通过点击刀片打印） 后端工作得很好，因为我可以通过这个带有模式的 Ajax 代码保存数据。无论问题是什么，都来自这里。

Answer 1

您将点击功能定义为

$("#custmodalsave").click(function(e){

但是，当这个函数被定义时，$("#custmodalsave") 在你的 DOM 中不可用，因为你正在追加它：

$('#fields').append(my_row); // my_row contains `[...] id="custmodalsave"`

要解决这个问题，只需使用事件委托：

$("body").on("click", "#custmodalsave", function(e){ ... });

有关事件委托的更多信息，请查看 jQuery 参考：

http://api.jquery.com/on/