jQuery senden Schaltfläche funktioniert nicht auf laden

Question

Wenn ich die Seite laden normalerweise alles geht, wird das Formular eingereicht und ich bekomme die richtigen Antworten .. aber wenn ich die Seite mit .load() Funktion jQuery laden das Formular nicht eingereicht! und ich bekomme nichts von Ajax Funktion !! jede Hilfe

das ist mein 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>` 

das ist mein Skript-Datei:

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

ich sein Vorkommnis vermuten aufgrund Ihrer HTML form wird über ajax immer geladen und davor wird nur Ihr $(document).ready( Code ausgeführt. Daher wird zu diesem Zeitpunkt kein Element mit der ID edit-content-form in DOM vorhanden sein. Also mit dieser Situation umgehen versuchen, wie unten Ereignis Delegation Technik:

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

    // your existing code goes here 

    }); 
}); 

Wir legen den Ereignis-Listener zum document Objekt, das sicher sein, es wird und dann zu #edit-content-form delegieren, wenn Ereignis eintritt.