jquery - 如何在每个循环的jquery模板中添加按钮

Question

 var markup = "<tr><td colspan='2'><h1>${hotelname}</h1></td></tr> 
<tr><td><input type=button value=MoreInformation id=btncabinmoreinfo1></td></tr>";
    $.template("cabinTemplate", markup);

此动态按钮 ID 不起作用。这是在 jquery 模板中创建动态按钮的正确方法吗？

按钮点击代码：

$("#btncabinmoreinfo1").click(function () {
    alert("more info");
});

当我单击此更多信息按钮时，我没有收到任何警报。

Answer 1

你做错了。你没有使用引号来表示输入按钮的 ID 和值。

var markup = '<tr><td colspan="2"><h1>${hotelname}</h1></td></tr> <tr><td><input type="button" value="MoreInformation" id="btncabinmoreinfo1"></td></tr>'; 

然后为按钮编写点击事件：

$("#btncabinmoreinfo1").click(function () {
 alert("//something");
})

Answer 2

ID 必须是唯一的，因此如果您在循环中多次使用它会导致问题。它应该是一个类。

如果将其更改为 class=btncabinmoreinfo1 然后单击事件

$(".btncabinmoreinfo1").click(function () { alert("更多信息");

你可能会有更多的运气。

Answer 3

我认为你正在这样做

var markup = "<tr><td colspan='2'><h1>${hotelname}</h1></td></tr> 
<tr><td><input type=button value=MoreInformation id=btncabinmoreinfo1></td></tr>";
    $.template("cabinTemplate", markup);

并附加它是一些容器，如

$.tmpl( "cabinTemplate", data).appendTo( "#elementid" );

接着

$("#btncabinmoreinfo1").click(function () {
    alert("more info");
});

所以，你可以做一些改变，比如

1. 用引号将您的属性值括起来
2. 并且因为您是在循环中执行此操作，所以在您的按钮上添加了一个类。
3. 在您的模板父级上附加事件，例如

---

var markup = "<tr><td colspan='2'><h1>${hotelname}</h1></td></tr> 
<tr><td><input type='button' value='MoreInformation' class='btncabinmoreinfo1'></td></tr>";
$.template("cabinTemplate", markup);

$("#elementid").on('click' , '.btncabinmoreinfo1',(function () {
    alert("more info");
});

您可以在此处查看.on的使用情况。

委托事件方法仅将事件处理程序附加到一个元素，#elementid，并且事件只需要冒泡（从 clicked.btncabinmoreinfo1到#elementid）：

因此，事件将#elementid通过单击将附加到元素.btncabinmoreinfo1会冒泡，因此新的动态元素也可以响应事件。

我希望，它会有所帮助:)