Javascript onclickがlaravelで期待通りに動作しない

Question

私のページにリンクがあります。ユーザーがリンクをクリックすると、ダイアログボックスが表示されるはずです。テストするために、次のコードを実行しました。ここで

は私の「ビュー」のコードでは、ユーザーは、私が呼ばれるJS onlick関数にしたい編集リンク

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

をクリックすると、ここでJSのコードがある

<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 --> 

です

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

}）;

編集ボタンをクリックすると、コンソールには何も表示されませんが、「動作します」と表示されるはずです。

これは、スクリプトが

<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が公共の場で保存されている主なレイアウトに含まれている\ SRC \ JS \ app.jsここでの問題であり、可能な方法何で何

問題を解決するには？ 注：編集をクリックすると、artisan serveを実行した後にcmdにapp.jsがロードされているのがわかります。

Answer 1

私は同じ問題を抱えていました。ここで 図である：ここで私はその周りに得た方法で、これは役立ちました

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

希望：ここ

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

jsのです。

Answer 2

要素がレンダリングされる前にスクリプトが実行されていると思います。このような状況のために、あなたは、DOMの準備が完了したときに実行されます、DOM準備ハンドラを使用することができ、

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

Answer 3

2つの問題：

• jQueryのコードは、DOM準備ハンドラに包まれる必要がありますそれらにアクセスしようとするときに要素が確実に存在するようにします。

• .eq()はゼロベースなので、.eq(2)はあなたの削除ボタンを選択しません。編集ボタンには.eq(1)が必要です。

私の代わりに、個別にすべての編集ボタンをクリックして割り当てるので、フォームにクリックを委任するコードを書き換えるだろう、とあなたのボタンは、クラスeditを持っているので、その代わりにeq()を使用することがより適切であろう。

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

複数のフォームがある場合は、固有のクラスまたはIDを与えて、上記のフォームを使用します。