Javascript onclick在laravel中未按预期工作

我的页面中有链接，当用户点击链接时，它会给我一个对话框，所以为了测试，我编写了以下代码

这是我的“视图””代码

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

}))

当我点击编辑按钮时，我在控制台中看不到任何东西，但它应该显示“它工作”

这是主布局中包含的脚本

  <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存储在public\src\js\app.js中

这里的问题是什么？解决问题的可能方法是什么？

---

注意：当我单击编辑时，我可以看到app.js在运行artisan serve后正在cmd中加载。

我也遇到了同样的问题。以下是我如何绕过它的： 以下是视图：

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

---

希望这有帮助。

我认为脚本是在呈现元素之前执行的。对于这种情况，您可以使用dom就绪处理程序，它将在dom就绪时执行

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

两个问题：

• jQuery代码需要包装在DOM就绪处理程序中，以确保在尝试访问元素时元素存在

• .eq（）

  是基于零的，因此

  .eq（2）

  将选择删除按钮而不是编辑。编辑按钮需要

  .eq（1）

我将重写代码以将单击委派给表单，而不是单独为每个编辑按钮分配单击，并且由于您的按钮具有类

edit

，因此使用该类而不是

eq（）

，更合适

---

如果你有多个表单，那么给它一个唯一的类或ID，并在上面使用。

在dom reaqdy Event中包装绑定代码我是一个非常初学者，你能用初学者的方式来理解它吗试试这个代码$（document）.ready（function（）{$（'.post.interaction a:eq（2））。单击（function（）{console.log（'it works'）；}）不，它不工作尝试此$（文档）；

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

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

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

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