jQuery提交按鈕不能在加載

Question

當我加載頁面通常一切都會發生，表單被提交，我得到正確的迴應..但是當我加載頁面​​函數jQuery表單不提交！而我從Ajax功能什麼都沒有！任何幫助

這是我的HTML：

    <div class="container"> 
         <div class="row"> 
          <h4>Manage Contents</h4> 
          <div class="table-responsive table3"> 
           <table class="table table-bordered"> 
           <thead> 
            <tr> 
            <th>#</th> 
            <th>Content</th> 
            <th>Owner</th> 
            <th>Created Date</th> 
            <th>Project</th> 
            <th>Priorty</th> 
            <th>Options</th> 
            </tr> 
           </thead> 
           <tbody> 
           @if ($availabe >= 1) 
            <?php $i =1; ?> 
            @foreach ($avashown as $key) 

           <?php //this is edit content form?> 
           @if(isset($index) && $index == $i && isset($editid) && isset($idexist) && $idexist == $key->id) 
           <tr> 
           <form id="edit-content-form" action="/testajax" method="POST"> 
            <td>{{ $i }}</td> 
            <td hidden="hidden">{{ csrf_field() }}</td> 
            <td hidden="hidden"><input type="hidden" name="id" value="{{ $editid }}"></td> 
            <td hidden="hidden"><input type="hidden" name="index" value="{{ $index }}"></td> 
            <td colspan="3"> 
             <div class="control-group" id="inputField1"> 
             <input class="form-control" type="text" name="content" value="{{ $key->content }}"> 
             <span class="help-block hideme" id="help-block1"></span> 
             </div> 
            </td>          
             <td colspan="1"> 
             <div class="control-group" id="inputField2"> 
              <select class="form-control" name="project"> 
              @foreach ($projects as $project) 
               <option value="{{ $project->id }}">{{ $project->projectname }}</option> 
               @endforeach 
              </select> 
              <span class="help-block hideme" id="help-block2"></span> 
             </div> 
             </td> 
             <td colspan="1"> 
             <div class="control-group" id="inputField3"> 
              <select class="form-control" name="priority"> 
               @foreach ($priorities as $priority) 
               <option value="{{ $priority->id }}">{{ $priority->value }}</option> 
               @endforeach 
              </select> 
              <span class="help-block hideme" id="help-block3"></span> 
             </div> 
             </td> 
             <td> 
             <input type="submit" id="submitForm" name="submit" value="Done"> 
             </td> 
            </form> 
           </tr> 
           <?php $i++;//i have to increase it here again?> 
           @else 
           <tr> 
           <td class="hidden"></td> 
           <td>{{ $i }}</td> 
           <td>{{ $key->content }}</td> 
           <?php $firstname = \App\User::find($key->owner_id);?> 
           <td>{{ ucfirst($firstname->firstname) }}</td> 
           <td>{{ $key->created_at }}</td> 
           <?php $projectname = \App\Project::find($key->project_id);?> 
           <td>{{ $projectname-> projectname }}</td> 
           <?php $priorty = \App\Priority::find($key->priority_id);?> 
           <td><span class ="label label-{{ $priorty->name }}">{{ $priorty->value }}<span></td> 

           <td> 
            <span class="glyphicon glyphicon-trash" data-toggle="tooltip" data-placement="bottom" title="Delete" onclick="ContentStatus('delete/ajax/{{ $key->id }}')"></span><span>&nbsp;</span> 

            <span id="editContentGlyph" data-toggle="tooltip" data-placement="bottom" title="Edit" class="glyphicon glyphicon-cog" onclick="editContent({{ $i }},{{ $key->id }})"></span> 

           </td> 
           <?php $i++; ?> 
           </tr> 
           @endif 
           @endforeach 
           @else 
            <tr> 
             <td>0</td> 
             <td colspan="6">Let's Work and Add some Contents! <a href="/new_content" data-toggle="tooltip" data-placement="bottom" title="Create">Create</a></td> 
            </tr> 
          @endif 
          </tbody> 
         </table> 
         </div> 
        </div> 
       </div>` 

這是我的腳本文件：

function editContent(index,id){ 

    var place = ".table3 tbody tr:nth-child("+index+") " ; 
    var place = "#alltables" ; 
    var des = place+" > *"; 

$(document).ready(function(){ 
    $(place).load("http://localhost:8000/manage_contents/"+index+"/"+id+" "+des, function(){ 
    }); 
}); 
} 


$(document).ready(function(){ 

$(function(){ 
    $('#edit-content-form').on('submit',function(e){ 
     $.ajaxSetup({ 
      header:$('meta[name="_token"]').attr('content') 
     }) 
     e.preventDefault(e); 

      $.ajax({ 

      type:"PUT", 
      url:'http://localhost:8000/testajax', 
      data:$(this).serialize(), 
      dataType: 'json', 
      success: function(data){ 
       $("#alerts").html(data.responseText); 

       if (data.updated) { 
        var place = ".table3 tbody tr:nth-child("+data.index+") " ; 
        var des = place+" > *"; 
        $(place).load("http://localhost:8000/manage_contents/ "+des, function(){ 
        }); 
       } 

      }, 
      error: function(data,xhr, ajaxOptions, thrownError){ 
       $.each(data.responseJSON, function(){ 
        var i = 1; 
        $.each(this, function(index,error) { 
         $("#inputField"+i).addClass(" has-error"); 
         $("#help-block"+i).removeClass(" hideme"); 
         $("#help-block"+i).html("<strong>"+error+"</strong>"); 
         i++; 
        }); 
       }); 

      }, 
     }) 
    }); 
}); 




}); 

`

Answer 1

我懷疑它的發生是由於你的HTML form是越來越通過ajax裝在此之前，只有您的代碼正在執行。因此，那時在DOM中將不存在具有ID edit-content-form的元素。因此，爲了應對這種情況使用事件委派技術象下面這樣試試：

$(function(){ 
    $(document).on('submit','#edit-content-form',function(e){ 

    // your existing code goes here 

    }); 
}); 

我們附上的事件偵聽器document對象，它會在那裏肯定，然後委託給#edit-content-form每當事件發生。