如何使用jquery和thymeleaf创建动态按钮，每个按钮都有自己的事件侦听器
使用jQuery和Thymeleaf创建动态按钮可以按照以下步骤进行：
步骤1：引入jQuery和Thymeleaf库
在HTML页面的<head>标签中引入jQuery和Thymeleaf库。可以使用CDN链接或本地文件的方式引入。
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/thymeleaf/3.0.12.RELEASE/thymeleaf.min.js"></script>
</head>步骤2：创建按钮容器
在页面中创建一个容器，用于存放动态生成的按钮。
<div id="buttonContainer"></div>步骤3：使用Thymeleaf和jQuery生成动态按钮
使用Thymeleaf的迭代器功能结合jQuery的DOM操作，可以动态生成按钮并添加事件侦听器。
<script th:inline="javascript">
// 定义按钮数据
var buttonData = [
{ label: "按钮1", action: "handleButtonClick1" },
{ label: "按钮2", action: "handleButtonClick2" },
{ label: "按钮3", action: "handleButtonClick3" }
];
// 生成按钮并添加事件侦听器
$.each(buttonData, function(index, button) {
var $button = $("<button>").text(button.label);
$button.click(window[button.action]); // 绑定事件侦听器
$("#buttonContainer").append($button);
});
// 按钮事件处理函数
function handleButtonClick1() {
// 处理按钮1点击事件
}
function handleButtonClick2() {
// 处理按钮2点击事件
}
function handleButtonClick3() {
// 处理按钮3点击事件
}
</script>上述代码中，通过定义一个按钮数据数组，可以灵活地配置按钮的文本和事件处理函数。使用jQuery的$.each函数遍历按钮数据数组，动态生成按钮元素，并利用Thymeleaf的迭代器功能实现动态按钮的生成。
在按钮元素创建后，通过$button.click()方法将事件处理函数绑定到按钮的点击事件上。
步骤4：完整代码示例
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/thymeleaf/3.0.12.RELEASE/thymeleaf.min.js"></script>
</head>
<body>
<div id="buttonContainer"></div>
<script th:inline="javascript">
var buttonData = [
{ label: "按钮1", action: "handleButtonClick1" },
{ label: "按钮2", action: "handleButtonClick2" },
{ label: "按钮3", action: "handleButtonClick3" }
];
$.each(buttonData, function(index, button) {
var $button = $("<button>").text(button.label);
$button.click(window[button.action]);
$("#buttonContainer").append($button);
});
function handleButtonClick1() {
console.log("按钮1被点击");
}
function handleButtonClick2() {
console.log("按钮2被点击");
}
function handleButtonClick3() {
console.log("按钮3被点击");
}
</script>
</body>
</html>此代码会生成3个动态按钮，并分别绑定了点击事件处理函数。你可以根据实际需求自定义按钮样式、添加更多按钮及事件处理函数。
这里没有提及云计算相关内容，若需要了解更多与云计算相关的知识，请访问腾讯云官方文档：腾讯云-云计算产品。
相关·内容
我的目标是构建一个动态FAQ页面，其中问题是可见的，当您单击上述问题时，带有答案的div将出现。一旦您再次单击div，它将再次切换。我已经尝试了一些东西，我完成的最好的结果是切换第一个问题的答案，而不管点击的是什么问题。 <!/div> </div></div>
&l
浏览 35提问于2020-07-16得票数 1
1回答
编辑:为了理解我问题的核心：，这个jsfiddle可能更容易使用。
HTML：
<!，bowlManageAddPerson按钮on
浏览 2提问于2015-06-08得票数 0
回答已采纳
1回答
有两个函数设置“userTurn”的值：
runGame()，在播放当前回合中的最后一个声音之后，将"userTurn“设置为真。在单击事件的条件语句中，我正在计算"userTurn“的值。下面是指向的链接。若要开始游戏，请单击“关闭”，然后单击“开始”。时间很慢，所以您必须等待模式的播放，然后按与播放的按钮顺序相同的顺序。这个问题是在播放第一个声音之后发现的。从那时起，用户
浏览 1提问于2017-06-18得票数 0
回答已采纳
我正在做一个图形用户界面，试图让不同的按钮来执行不同的任务。 bthree.addActionListener(ccal);
frame.setVisible(true);
我的actionlistenerthis.lthree = lthree;
public void actio
浏览 1提问于2017-10-13得票数 0
3回答
我正在基于用户操作动态生成twitter引导模态(长篇大论)。假设有时候用户可以在他的屏幕上看到100个模态。在每个模式中，我都有5个动态按钮，每个按钮都有自己的用途，并且在所有模式中都是一样的，并且有不同的id。每当有一个新的twitter模式打开时，我就会使用jquery将onClick事件</em
浏览 1提问于2014-02-27得票数 0
2回答
我正在尝试根据点击的按钮更改表格的行。第一次单击按钮时，行会发生变化，但之后行值不会发生变化。此外，在按钮更改后，事件侦听器将被移除。<% } %>
jQuery
浏览 1提问于2019-01-30得票数 0
2回答
我正在从C#代码后台文件中动态加载XAML代码。因此，我无法向按钮添加单击事件。
有没有办法知道使用按钮名称而不使用click事件来单击哪个按钮？
浏览 0提问于2013-03-26得票数 0
如何移除所有连接到在Chrome控制台的事件监听器中可以看到的元素的事件监听器？例如：
正如您所看到的，元素是<a>，但它也是来自<div>的一些侦听器，每个侦听器旁边都有一个删除按钮。我想复制类似
浏览 17提问于2019-08-01得票数 1
1回答
根据文档，在插入新内容之前，html()替换(即调用empty())该<div>的所有相关元素(包括绑定)，然而，这意味着侦听器不会增加。即使我使用remove()删除<div>元素并重新创建，侦听器的数量也不会减少。这是不是与DOM缓存有关，DOM缓存可能没有被清空？我只有一个页面，据我所知，第一个页面总是被缓存的。-1.4.5/jquery.mobile-1.4.5.min.css" />
浏览 4提问于2020-12-27得票数 0
如何通过javascript在相应的delete按钮点击事件上动态添加/移除textbox (不清除textbox的数据)和相应的delete按钮？
注意:每个动态创建的文本框都有一个单独的按钮。下面是我的javascript函数。我使用的是<em
浏览 0提问于2011-09-06得票数 4
回答已采纳
这里有一个来解释我的问题。如果您尝试单击按钮“添加配料”，则会调用按钮单击事件。我的问题是，当我点击“创建副标题”时，它会动态地为每个子类别创建“添加配料”按钮。所有的按钮都有相同的id，以"create-ingredient“开头，并加上一个惟一的ID，因此它为按钮创建了一个惟一的
浏览 0提问于2012-12-12得票数 1
回答已采纳
1回答
我想装饰我的网站，并添加了几个埃及神的图片下面有一个按钮，所以当你点击按钮，显示上帝的名字，他们的描述将显示。我也想切换我的网站的主题，点击他们的按钮，我的整个进入网站的主题将改变。我有点挣扎与css和任何背景颜色我也设置它，该网站是不改变，所以任何帮助将不胜感激<3。
这是我的基本代码：
浏览 1提问于2022-06-23得票数 -4
1回答
我在Haxe中创建一个简单的UI工具栏组件，以便在Flash游戏中使用。工具栏是您常用的UI样式工具栏，它有一个背景和几个按钮。当点击按钮时，一些游戏动作就会发生。关于实现工具栏按钮事件的最佳方法，我有一个问题。父类将创建工具栏，然后在单击“事件”按钮上注册它想要的任何函数。工具栏扩展了sprite
浏览 2提问于2009-07-26得票数 0
回答已采纳
2回答
我在一个页面上有多个帖子，每个帖子都包含一个删除按钮来删除这个帖子。每个帖子都有一个独特的标识。我想使用ajax删除这个帖子。@foreach($posts as $post)
浏览 5提问于2017-12-20得票数 0
回答已采纳
我有一个模板生成器，它可以创建一个字符串模板，其中包含一些可以稍后修改的变量，例如：“亲爱的乘客，您的航班”FNumber@ date“date”已从“OldDate”改为“NewData@@”。还有一个页面填充模板，将文本作为SMS发送给用户，因此用户将选择由上一节生成的模板标题，然后创建包含变量值的动态控件，用于前面的示例:我将创建3个输入，将“FNumber”替换为实际/真实的航班号，与日期相同，这是
浏览 1提问于2017-08-22得票数 0
回答已采纳
我有一个动态加载其内容的列表。列表的元素是正在转换为游戏对象的按钮。对于用户列表中的每个对象，都会创建一个新元素。现在，我希望能够在按下按钮时删除元素和按钮本身，其中每个元素都有自己动态创建的删除按钮。我尝试使用OnMouseDown事件放
浏览 28提问于2019-05-28得票数 1
回答已采纳
我有一个用jQuery bind()定义的带有“单击”事件侦听器的按钮。事件侦听器可以正常工作，直到我(以编程方式)对父元素执行display:none (有效地隐藏父元素和按钮)。示例:假设我有以下HTML标记和下面的事件侦听器：
$( ".my-button" ).bind( "click", myFunction );
浏览 1提问于2014-08-26得票数 3
回答已采纳
1回答
我有一个主要的1级类，并加载图像，精灵和电影剪辑作为1级的孩子。y }
}例如，舞台上有一只叫鲍勃的狗，当我双击它时，它会调用上面的方法touchInteract
浏览 2提问于2013-10-26得票数 0
2回答
HTML5画布上的多个事件侦听器
、、、、
我一直试图在严格的HTML5和JavaScript中创建一个游戏，并且遇到了一个我似乎无法理解的问题。为了尽量避免使用第三方类/库，我创建了自己的类，用于处理HTML5画布元素中的自定义按钮。首先，我的事件侦听器现在使用一个函数，它保存对我试图使用的任何按钮的引用。
浏览 1提问于2011-03-03得票数 1
回答已采纳
1回答
我正在尝试创建一个可配置的按钮栏，并在每个按钮中添加onclick事件侦听器。我需要动态分配函数，并使用按钮的data-function属性提供的名称。中应该做什么，以便将正确的函数添加到每个按钮的onclick事件中？
我想要这个没有jQuery。
浏览 1提问于2014-05-22得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
