SpringBoot中使用thymeleaf时点击按钮触发事件失败

最新推荐文章于 2023-12-02 22:39:43 发布

霸道流氓气质

最新推荐文章于 2023-12-02 22:39:43 发布

阅读量3.2k

点赞数

分类专栏： SpringBoot进阶文章标签： delegate

本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/88567805

版权

SpringBoot进阶专栏收录该内容

199 篇文章 9 订阅 ¥9.90 ¥99.00

订阅专栏

场景

在SpringBoot项目中使用thymeleaf模板时按钮的点击事件没法触发。

需要用到jquery的delegate()函数。

delegate()函数用于为指定元素的一个或多个事件绑定事件处理函数。

实现

html代码：

<button id="uploladBtn" class="btn btn-info mt-2" type="button" ><i class="fa fa-reply"></i>上传</button>

引入js文件：

th:replace="layout/layout(title='收货单数据',cssPaths='/public/css/plugins/jsTree/style.min.css',jsPaths='/modular/receiveOrder/wmsReceiveOrder.js')">

js代码：

$(document).delegate("button#uploladBtn", "click", function () {

        uploadExcel();
    });

这样就能在js文件中通过button的id触发点击事件。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

霸道流氓气质

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

订阅专栏

关于thymeleaf th:onclick失效

th_century17的博客

12-02

3248

关于thymeleaf th:onclick失效问题分别在两个页面试过这个方法有一个页面失效了 thymeleaf页面定义了 th:onclick事件，并传入两个参数失效页面： //页面停用标签 <td class="td-manage" > <span class="layui-btn layui-btn-normal layui-btn-mini" th:val...

thymeleaf（二）点击事件

Sicily_winner的博客

03-28

1万+

注意使用了thymeleaf模板jquery要写在section里面，不然没有效果呢！！！！ajax是用来传输数据的如果说是返回整个页面是window.location.href="接口地址?传输参数名称="+等到的web页面值;<section> <script> $('.aaa').click(function(){ al...

参与评论您还未登录，请先登录后发表或查看评论

springBoot整合thymeleaf时th：onclick事件

weixin_30337251的博客

08-15

501

今天按照《JavaEE开发的颠覆者: Spring Boot实战》学习spring boot的时候在编写7_2时thymeleaf传参的时候发生500错误，通过查找各方面资料，发现书上的springboot版本（1.3.0）和我用的版本（2.1.7）不一样引起的以下处理方法： 1. 将springboot版本改成2.0.5 2. 3.x版本的thymeleaf为了...

Thymeleaf模板引擎下使用局部刷新后 jQuery事件绑定失效的问题

SilentWu的博客

09-26

3204

前端页面： <table class="table" th:fragment="user_content"> <thead class=" text-primary"> <th>用户名</th> <th>密码</th> <th>手机号码&lt...

springboot thymeleaf each onclick

qq_36213455的博客

05-11

132

<dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring5</artifactId> <version>3.0.11.RELEASE</version> <scope>compile</scope> </dependency> <sp.

thymeleaf点击onclick事件

小馒头味的博客

12-17

1万+

thymeleaf点击onclick事件 add是方法名，param是参数 th:onclick="'javascript:add('+${param}+')'"

Spring boot + thymeleaf 后端直接给onclick函数赋值的实现代码

08-30

这个事件处理函数将在点击按钮时被触发，并将 corp.id 和 status 传递给 check 函数。知识点 5：JS 函数在上面的示例代码中，我们使用 JS 函数来处理 onclick 事件。JS 函数用于处理点击事件，并将数据发送到...

spring boot+thymeleaf增删改查(含登录).rar

07-25

2. 删：删除图书，一般会有一个列表显示所有图书，每个条目旁边都有一个删除按钮，点击后触发删除操作。 3. 改：修改图书信息，用户选择需要修改的图书，进入编辑页面，修改后保存到数据库。 4. 查：查询图书，可以...

在线编辑office软件pageoffice集成springboot freemarker或thymeleaf框架

诗语待马

07-31

1242

本篇博客实现一个使用pageoffice集成springboot框架，在两种不同的前端渲染框架下的在线编辑word的操作。

【Springboot学习笔记】SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法

WEN_Windy的博客

08-25

7380

【Springboot学习笔记】SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法目录1.搭建环境1.1直接从网上下载SpringBoot样例网站程序1.2使用IDEA新建SpringBoot样例网站运行SpringBoot样例网站合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列...

SpringMVC:使用Thymeleaf中的th:href 无法点击的问题

乌拉乌拉，起飞

03-16

433

SpringMVC:使用Thymeleaf中的th:href 无法点击的问题

点击div显示下拉框，然后下拉框中的点击事件不生效。

热门推荐

小帅的博客

09-30

1万+

最近在学习spring boot ，因为spring boot 的前端模板默认推荐thyme leaf，所以也开了一下 thyme leaf绑定button的onclick事件 &lt;input type="button" th:onclick="'javascript:fungetone(\''+${con.uid}+'\');'" value = "修改" /&amp

thymeleaf点击事件传递参数

shuai的博客

03-14

3309

thymeleaf点击事件传递参数

thymeleaf添加点击事件 “th:onclick”传参使页面报错问题

javabasic----Java基础篇（一）

07-21

2944

thymeleaf th:onclick传参问题解决最近在开发过程中遇到springBoot使用thymeleaf模板引擎，添加点击事件会使页面报错的问题，下面分享一下自己的解决方法。一：可能是版本问题，在springboot2.0.0版本中使用下面写法会报错。 <li th:each="city:${cityList}"> <a href="#" th:onclick="getSchoolList([[${city.id}]],[[${city.cityName}]]);

thymeleaf2.x 如何在onclick传值出错的解决方案

qq_43591363的博客

02-27

409

引言：昨天做毕业设计突然碰上onclick传动态值失效的问题，开始写的是这个语句，在管理页面可以实现没有问题。 th:onclick="'javascript:_queryPage(\''+${动态值}+'\')'" 动态值：${item.属性名} 以上方法在标签一直报错没有反应，前端查看就变成了这样了： onclick="javascript:_queryPage(1,‘属性值’)" ...

SpringBoot+Thymeleaf页面中使用th:onclick的几种方法

weixin_41070914的博客

04-20

6746

我以以下代码为演示代码 <script th:inline="javascript"> function getName(name){ console.log(name); } <script> 方法一： <button class="btn" th:onclick="getName([[${person.name}]]);">获得名字<...

springboot+thymeleaf+mybatis框架实现删除

05-14

要实现删除操作，需要在后端编写相应的控制器方法，同时在前端页面上添加删除按钮和触发删除操作的事件。 1. 后端控制器方法在后端控制器中，需要定义一个删除操作的方法，通常使用 @DeleteMapping 或者 @PostMapping 注解来标识该方法。例如： ```java @DeleteMapping("/delete/{id}") public String delete(@PathVariable("id") Long id) { // 调用 mybatis 的删除方法，删除指定 id 的数据 userService.delete(id); return "redirect:/user/list"; } ``` 上述代码中，我们使用 @DeleteMapping 注解来标识 delete 方法，同时通过 @PathVariable 注解来获取要删除的数据的 id。然后调用 mybatis 的删除方法，删除指定 id 的数据。 2. 前端页面删除按钮在前端页面中，需要添加一个删除按钮，并绑定一个触发删除操作的事件。通常可以使用 a 标签来实现删除按钮，同时在 href 属性中添加删除操作的请求路径。例如： ```html <a href="/user/delete/${user.id}" onclick="return confirm('确定要删除吗？')">删除</a> ``` 上述代码中，我们使用 Thymeleaf 的表达式语法获取要删除的数据的 id，然后将其作为请求路径的参数传递给后端控制器。同时在 onclick 事件中添加一个确认框，提示用户是否确认删除。 3. 前端页面列表展示在前端页面的列表展示中，需要添加一个删除按钮，让用户可以直接在列表中删除数据。通常可以使用表格的方式展示数据，并在每一行数据的最后一列添加一个删除按钮。例如： ```html <table> <thead> <tr> <th>ID</th> <th>用户名</th> <th>操作</th> </tr> </thead> <tbody> <tr th:each="user : ${users}"> <td th:text="${user.id}"></td> <td th:text="${user.username}"></td> <td> <a href="/user/delete/${user.id}" onclick="return confirm('确定要删除吗？')">删除</a> </td> </tr> </tbody> </table> ``` 上述代码中，我们使用 Thymeleaf 的 each 循环语法来遍历所有的用户数据，然后在每一行数据的最后一列添加一个删除按钮。同时将要删除的数据的 id 作为请求路径的参数传递给后端控制器。