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

この詳細情報ボタンをクリックしても、アラートが表示されません。

4

3 に答える 3

0

私はあなたがそれをやっていると思います

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の使用を確認できます。

委譲イベント アプローチでは、イベント ハンドラーを 1 つの要素のみにアタッチし、イベントは(クリックされた要素から に)#elementidバブルアップするだけで済みます。.btncabinmoreinfo1#elementid

#elementidそのため、クリックするとイベントが要素にアタッチされて.btncabinmoreinfo1バブルアップするため、新しい動的要素もイベントに応答できます。

私は願っています、それは助けになるでしょう:)

于 2012-11-01T10:38:27.107 に答える
0

ID は一意である必要があるため、ループで複数回使用すると問題が発生します。代わりにクラスにする必要があります。

class=btncabinmoreinfo1 に変更してからクリックイベントを

$(".btncabinmoreinfo1").click(関数 () { alert("詳細");

もっと運がいいかもしれません。

于 2012-11-01T10:25:04.077 に答える
0

入力ボタンの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");
})
于 2012-11-01T10:28:06.517 に答える