Question

我想使用jQuery定位以下按钮

<button id="mybutton" 
        book_title="{{$book->title}}"
        author="{{$book->author}}"
        idx="{{$book->id}}"
        class="btn btn-success b_r_20 btn-xs pull-right"
        >
    Borrow
</button>

单击按钮后，我要显示一个alert()。

这是我的 HTML

<div class="row">
    <div class="col-lg-8 col-12 m-t-35" >
        @foreach($books as $book)
            <div class="bg-white section_border ">
                <div class="row" >
                    <div class="col-md-3 col-12 center">
                        <img src="{{URL::to($book->photo)}}" style="height: 180px;width: auto; padding-left: 5px;">
                    </div>
                    <div class="col-md-9" >
                        <h4 class="m-t-10">
                            {{$book->title}}
                        </h4>
                        <h5 class="m-t-5">
                            Author: {{$book->author}}
                        </h5>
                        <h5 class="m-t-5">
                            Category: {{$book->category}}
                        </h5>
                        @if(Auth::user()->role == "Manager" || Auth::user()->role == "Staff")
                            <h5 class="m-t-5">
                                Shelve: {{$book->shelve->title}}
                            </h5>
                        @endif
                        <div class="m-t-15 p-b-15">
                            <h5 class="pull-left">
                                For Sale: {{$book->copies_forsale}} copies
                            </h5>
                            <h5 class=" pull-right">
                                Borrow: {{$book->copies_forborrow}} copies
                            </h5>
                        </div>
                        <br>
                        <hr>
                        <div class="m-t-15 p-b-15">
                            <button class="btn btn-success b_r_20 btn-xs pull-left">
                                Purchase
                            </button>
                            @if(($book->borrowing_requests->count() == 0) || ($book->purchasing_requests->count() == 0))
                                <button class="btn btn-danger b_r_20 btn-xs pull-right">
                                    Delete
                                </button>
                            @endif
                            <a title="edit this book" href="{{url('book_edit/'.$book->id)}}">
                                <button class="btn btn-primary b_r_20 btn-xs pull-left">
                                    EDIT
                                </button>
                            </a>
                            <button id="mybutton" book_title="{{$book->title}}" author="{{$book->author}}" idx="{{$book->id}}" class="btn btn-success b_r_20 btn-xs pull-right">
                                Borrow
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <br>
        @endforeach  
    </div>
</div>

Answer 1

定位该按钮：

$('#mybutton').on('click', function() {

});

然后将alert()添加到事件处理程序内部：

$('#mybutton').on('click', function() {
    alert("Hello, World!");
});

使用纯Javascript：

var btn = document.getElementById('mybutton');

btn.addEventListener('click', function() {
    alert("Hello, World!");
});

Answer 2

使用Jquery

$(function() { $("#mybutton").on("click", function () { alert("clicked");} });

Answer 3

警报按钮的完整代码。

<html>
<body>


 <div>
       <button id="mybutton" book_title="{{$book->title}}" author="{{$book- 
       >author}}" idx="{{$book->id}}" class="btn btn-success b_r_20 btn-xs 
       pull-right">Borrow</button>
 </div>
 <script>
         $(document).ready(function(){
         $("#mybutton").click(function(){
         alert("ok.");});
         });
 </script>

 </body>
 </html>

访问Javascript中的目标按钮

3 个答案: