javascript - 在 Javascript 中访问目标按钮
问题描述
我想使用 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>
解决方案
警报按钮的完整代码。
<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>
推荐阅读
- javafx - 无法以编程方式选择使用对象的 Javafx 组合框项目
- c# - 我可以在 HttpSys 管道中找到控制器吗?
- javascript - 如何使用 TypeScript 在 JSS 中输入样式?
- reactjs - 如何在 react-router v5 中正确包装路由?
- pdf - 强制下载 itextsharp 在 PDF 中创建的锚点
- java - 从大文件中查找单词频率
- node.js - Angular:带参数的 npm 脚本
- unity3d - 如果满足某些条件,激活 Unity 动画?
- google-apps-script - 另一个 IMPORTXML 返回空内容
- ios - 推送通知不起作用(仅在调试模式下工作)