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");
});

当我点击这个MoreInformation按钮时，我没有收到任何警报。

Answer 1

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

如果您将其更改为class = btncabinmoreinfo1，然后将click事件更改为

$（“。btncabinmoreinfo1”）。click（function（）{ 警报（“更多信息”）;

你可能会有更多的运气。

Answer 2

你做错了。你没有使用输入按钮的id和值的引号。

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

然后为按钮编写click事件：

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

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");
});

所以，您可以进行一些更改，例如

将您的属性值括在引号
因为你在循环中这样做，所以在按钮上添加一个类。
在您的模板父级上附加活动，例如

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，并且事件只需要冒泡（从点击的.btncabinmoreinfo1到#elementid）：< / p>

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

我希望，这会有所帮助：）

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

3 个答案: