2

私はここに来たばかりです。だからここに私が立ち往生している場所です：

JavaScriptを使用してhtmlテーブルを作成しました。ボタンをクリックすると、まったく同じ構造のテーブルのセットが作成されますが、それらのテーブル内のオブジェクト (ボタン、テキストなど) の ID は異なります。生成されたテーブルの 1 つのボタンで jQuery を使用してクリック機能を実行しようとすると、機能しません。ここはどうやって回るの？前もって感謝します！

これは、javascript で (一意の ID を持つ) html テーブルを作成するサンプル関数です。

function CreateTables() {

    var html = ' ';
    var valPrompt = prompt("How many tables would you like to add?");
    parseInt(valPrompt);
    for (i = 1; i <= valPrompt; i++) {

        html += "<table>" + "<tr>" + "<td>" + "Text goes here" + "</td>" + "<td>" + "<input type='text' id='txtTEXT" + i + "'/>" + "</td>" + "<td>" + < input type = 'button'
        id = 'btnALERT" + i + "' / > +"</td>" + "</tr>" + "</table>"
    }
    document.getElementById('HtmlPlaceHolder').innerHTML = html;
}​

したがって、コードを確認すると、関数CreateTablesが実行されると、一意の ID を持つボタン (btnALERT) を持つテーブルのセットが作成されます。オブジェクトを選択するために、jQuery を使用するとします。たとえば、(CreateTables によって生成された) btnALERT1 でハンドラーをバインドする場合、単純な "Hello" を警告するためにクリック関数を言うとしたら、どうすればよいでしょうか? これに対する私のコードは機能していないようです:

$(document).ready(function() {
    $('#btnALERT1').click(function() {
        alert("Hello");
    });
});​
4

4 に答える 4

1

.live（）を使用します（古いjqueryバージョンの場合-<v1.7）：

$('#btnALERT1').live('click', function()
{
   alert("Hello");
});

または：

$(document).delegate('#btnALERT1', 'click', function() 
{
   alert("Hello");
});

.on（）を使用します（新しいjqueryバージョンの場合-> = 1.7）：

$(document).on('click', '#btnALERT1', function()
{
   alert("Hello");
});
于 2012-09-24T09:04:06.257 に答える
0

ドキュメントの準備ができたときではなく、テーブルの作成後にイベントハンドラーをアタッチする必要があります（ユーザーがドキュメントを操作しているので、とにかくドキュメントの準備ができているはずです）。

確かに、これはjQueryで実行できますが、ネイティブメソッドを見てください。jQueryは、実行する内容によっては肥大化しすぎて、DOMについて何かを学ぶことができます。

コールバックを追加し、簡単に取り戻すことができるいくつかのことを示すコードを以下に追加しました。それはあなたが求めていたものとは正確には異なりますが、DOMで自分の道を見つけるための素晴らしいスタートです。

function CreateTables() {

    var html = ' ';
    var valPrompt = prompt("How many tables would you like to add?");
    parseInt(valPrompt);
    for (i = 1; i <= valPrompt; i++) {

        html += "<table>" + "<tr>" + "<td>" + "Text goes here" + "</td>" + "<td>" + "<input type='text' id='txtTEXT" + i + "'/>" + "</td>" + "<td>" + < input type = 'button'
        id = 'btnALERT" + i + "' / > +"</td>" + "</tr>" + "</table>"
    }
    var placeholder = document.getElementById('HtmlPlaceHolder').innerHTML = html;
    placeholder.innerHTML = html;
    placeholder.addEventListener('click', function (e) {
       console.log(this, e);
    }

}​
于 2012-09-24T09:08:43.303 に答える
0

HtmlPlaceHolderのデリゲートを使用して、次のようなクリックイベントをチェックします。

$("#HtmlPlaceHolder").on("click", "input[type=button]", function() {
    alert($(this).attr("id"));
});

また、ボタンIDスキームをbtnALERT_1に変更して、.split("_")メソッドでID番号を抽出できるようにします。

于 2012-09-24T09:08:44.067 に答える
0

私はあなたが方法を使用したいかもしれないと思います.on()：

$(document).ready(function() {
    $('#btnALERT1').on('click', function() {
        alert("Hello");
    });
});

詳細については、オンラインドキュメントを確認してください：http：//api.jquery.com/on/

于 2012-09-24T09:03:24.177 に答える