Question

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

这是我的“查看”代码

<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');

}）;

当我点击编辑按钮时，我在控制台中看不到任何内容，但它应该显示“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服务后在cmd中加载。

Answer 1

我遇到了同样的问题。以下是我如何解决它：以下是观点：

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

这是js：

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

希望这有用。

Answer 2

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

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

Answer 3

两个问题：

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

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

eq()

如果您有多个表单，请为其指定一个唯一的类或ID，并在上面使用它。

在laravel

3 个答案: