Javascript onclick funktioniert nicht wie erwartet in Laravel

Question

Ich habe einen Link in meiner Seite, wenn der Benutzer auf den Link klickt, sollte es mir ein Dialogfeld geben, so zu testen, habe ich den folgenden Code.

Hier ist meine 'Ansicht' Code

<div class="panel-body"> 
       <br> 
       <form class="form-horizontal" role="form" method="POST" action="{{ url('/unsayd') }}"> 
       {{ csrf_field() }} 

          <div class="form-group"> 
         <div class="col-md-6"> 

          @foreach ($posts as $post) 

           <article class = "post" data-postid="{{ $post->id }}"> 
            <p>{{$post->userpost}}</p> 
           <div class='info'> 
            Posted by {{ $post->user->name }} on {{ $post->user->created_at}} 
           </div> 

           <div class = 'interaction'> 
            <a href=#>Like </a> | 
            @if(Auth::user() == $post->user) 
         | 
             <a href="#" class="edit">Edit</a> | 
             <a href="{{ route('post.delete', ['post_id' => $post->id]) }}">Delete</a> 

            @endif 


          @endforeach 

         </div> 
        </div> 

        <div class="modal fade" tabindex="-1" role="dialog" id="edit-modal"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title">Edit Post</h4> 
      </div> 
      <div class="modal-body"> 
       <form> 
        <div class="form-group"> 
         <label for="post-body">Edit the Post</label> 
         <textarea class="form-control" name="post-body" id="post-body" rows="5"></textarea> 
        </div> 
       </form> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary" id="modal-save">Save changes</button> 
      </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

Wenn der Benutzer auf den Link Bearbeiten klickt

<a href="#" class="edit">Edit</a> 

I onlick Funktion den js wollen aufgerufen werden, hier ist der JS-Code

$('.post').find('.interaction').find('a').eq(2).on('click' , function(){ 
console.log('It works'); 

});

Wenn ich auf die Bearbeitungsschaltfläche klicke, sehe ich nichts in der Konsole, aber es soll "Es funktioniert" zeigen.

Dies sind die Skripte in das Hauptlayout enthalten

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
<script src="{{ URL::to('src/js/app.js') }}"></script> 

app.js in öffentlich gespeichert \ src \ js \ app.js

Was das Problem hier ist und was die Art und Weise, um das Problem zu beheben? HINWEIS: Wenn ich auf Bearbeiten klicke, kann ich sehen, dass die app.js nach dem Ausführen von artisan serve in den cmd geladen wird.

Answer 1

Ich hatte das gleiche Problem. Hier ist, wie ich um ihn bekam: Hier ist die Ansicht:

<button id="testButton" type=""button">Click me</button> 

Hier ist die js:

$(document).on('click', '#testButton', function() { 
    console.log('clicked!'); 
}); 

Hoffnung, das war hilfreich.

Answer 2

Ich denke, das Skript wird ausgeführt, bevor das Element gerendert wird. Für solche Situationen können Sie die dom bereit Handler verwenden, die ausgeführt wird, wenn der Dom fertig ist,

$(document).ready(function() { 
    $('.post .interaction a:eq(2)').click(function() { 
    console.log('It works'); 
    }); 
}) 

Answer 3

Zwei Probleme:

• Die jQuery-Code muss in einem DOM bereit Handler gewickelt werden , um sicherzustellen, dass die Elemente vorhanden sind, wenn Sie versuchen, auf sie zuzugreifen.

• .eq() ist Null basiert, so .eq(2) würde wählen Sie Ihre Schaltfläche löschen nicht bearbeiten. Sie benötigen .eq(1) für die Bearbeitungsschaltfläche.

Ich würde den Code neu schreiben das Klicken auf das Formular zu delegieren, anstatt einen Klick auf jede Schaltfläche Bearbeiten einzeln zuzuweisen, und da Ihre Schaltfläche Klasse edit, wäre es sinnvoller sein, dass anstelle von eq() .

$(function(){ 
    $('form.form-horizontal').on('click', '.post .interaction .edit', function(){ 
     console.log('It works'); 
    }); 
}); 

Wenn Sie mehrere Formulare haben, geben Sie ihr eine eindeutige Klasse oder ID und verwenden Sie diese in der oben genannten Form.