Javascript onclick 在 laravel 中无法按预期工作答案

【问题标题】：Javascript onclick not working as expected in laravelJavascript onclick 在 laravel 中无法按预期工作
【发布时间】：2016-10-01 23:13:56
【问题描述】：

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

这是我的“视图”代码

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

当用户点击编辑链接时

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

我要调用js的onlick函数，这里是JS代码

$('.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 存放在 public\src\js\app.js 中

这里有什么问题以及解决问题的可能方法是什么？注意：当我点击编辑时，我可以看到 app.js 在运行 artisan serve 后加载到 cmd 中。

【问题讨论】：

将绑定代码包装在 dom reaqdy 事件中
我是一个非常初学者，能不能用初学者理解的方式说一下
试试这个代码 $(document).ready(function() { $('.post .interaction a:eq(2)').click(function() { console.log('It作品'); }); })
不，没用
试试这个 $(document).on("click", '.post .interaction a', function() { alert('It works'); });

标签： javascript jquery laravel laravel-5.2

【解决方案1】：

我遇到了同样的问题。这是我解决它的方法：这是视图：

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

这里是js：

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

希望这对您有所帮助。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

两个问题：

jQuery 代码需要包装在 DOM 就绪处理程序中，以确保在您尝试访问它们时元素存在。
.eq() 是从零开始的，所以.eq(2) 会选择你的删除按钮而不是编辑。编辑按钮需要.eq(1)。

我会重写代码以将点击委托给表单，而不是单独为每个编辑按钮分配点击，并且由于您的按钮具有类 edit，因此使用它而不是 eq() 会更合适.

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

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

【讨论】：