1

クリック可能な JavaScript を使用して、HTML のテーブルに行を追加しようとしています。

これが私のコードです：

HTML:

<table border="1" id="example" style="cursor: pointer;">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
</table>

JavaScript:

//clicked function
$('#example').find('tr').click( function(){
    alert('You clicked row '+ ($(this).index()) );
});

//add new row
var x=document.getElementById('example');
var new_row = x.rows[0].cloneNode(true);                      
new_row.cells[0].innerHTML = "hello";
x.appendChild( new_row );

問題は、新しく追加された行はクリック可能ですが、クリックされた機能を経由してアラートを取得できないことです。

理由を知っている人はいますか？

4

4 に答える 4

2

問題は、新しく追加された行はクリック可能ですが、クリックされた機能を経由してアラートを取得できないことです。

理由を知っている人はいますか？

要素へのクリック イベントの初期バインドを実行する場合、イベントはその時点で DOM に存在する要素にtrのみバインドされます。tr

これが、イベント バインディングがデフォルトでどのように機能するかです。現在DOMにあるもののみをバインドできます。

ただし、jQuery 1.7+ のon()または jQuery 1.6- のdelegate()メソッドを使用すると、委任でイベントをバインドできます。

これにより、実際にイベントをデリゲートしたい要素の最も近い静的親要素にイベントをバインドできます。

テーブル自体が最も近い静的な親要素であると想定しています。つまり、テーブルは常に存在し、動的に追加するのはtr要素だけです。

on()jQuery 1.7+ を使用する場合の使用は、次のようになります。

$('#example').on('click', 'tr', function(){
    alert('You clicked row '+ ($(this).index()) );
});

jQuery 1.6を使用delegate()する場合の使用は、次のようになります。

$('#example').delegate('tr', 'click' , function(){
    alert('You clicked row '+ ($(this).index()) );
});

これが行うことは、イベントを id の要素にバインドしますが、クリックをその要素内でexampleクリックされたものに委任しますtr。イベントは毎回委任されるため、新しく追加されたtr要素#exampleも含まれます。

于 2013-04-23T20:26:46.450 に答える
1

これを試してください: 次のコードは、動的に追加された行を処理します。

//clicked function
$('#example').on('click', 'tr', function(){
    alert('You clicked row '+ ($(this).index()) );
});
于 2013-04-23T20:17:56.147 に答える
0

これはあなたが達成しようとしていることですか？

<table border="1" id="example" style="cursor: pointer;">
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
    </thead>
    <tbody id="addHere"></tbody>
</table>

var addHere = document.getElementById("addHere");
var newTr;
var newTd;

function clicked(evt) {
    alert("clicked tr: " + evt.target.parentNode.id);
}

for (var i = 1; i < 11; i += 1) {
    newTr = document.createElement("tr");
    newTr.id = "row" + i;
    newTr.addEventListener("click", clicked, false);

    for (j = 1; j < 5; j += 1) {
        newTd = document.createElement("td");
        newTd.textContent = j;
        newTr.appendChild(newTd);
    }

    addHere.appendChild(newTr);
}

jsfiddleで

あなたのコードでは、行を探してから、見つけたものにイベントをバインドしているようです。

次に、 Node.cloneNodeを使用して行を追加します。

ノードのクローンを作成すると、固有の (インライン) リスナーを含む、すべての属性とその値がコピーされます。addEventListener() を使用して追加されたイベント リスナーや、要素のプロパティに割り当てられたイベント リスナー (例: node.onclick = fn) はコピーされません。

そのため、これらの新しく追加された要素のいずれにもバインドされたイベント ハンドラーはありません。

これに対処する別の方法は、jquery デリゲート イベント ハンドラー メソッド (on)を使用することです。

セレクターが提供されている場合、イベント ハンドラーは委任されていると見なされます。イベントがバインドされた要素で直接発生した場合、ハンドラーは呼び出されませんが、セレクターに一致する子孫 (内部要素) に対してのみ呼び出されます。jQuery は、イベント ターゲットからハンドラーがアタッチされている要素 (つまり、最も内側の要素から最も外側の要素) までイベントをバブルし、セレクターに一致するそのパスに沿ったすべての要素に対してハンドラーを実行します。

そして、次のことを行います。

var addHere = document.getElementById("addHere");
var newTr;
var newTd;

function clicked(evt) {
    alert("clicked tr: " + evt.target.parentNode.id);
}

$(document).on("click", "#addHere tr", clicked);

for (var i = 1; i < 11; i += 1) {
    newTr = document.createElement("tr");
    newTr.id = "row" + i;

    for (j = 1; j < 5; j += 1) {
        newTd = document.createElement("td");
        newTd.textContent = j;
        newTr.appendChild(newTd);
    }

    addHere.appendChild(newTr);
}

jsfiddleで

于 2013-04-23T20:33:51.893 に答える
0

document.ready でクリック イベントをバインドしています。ワードの後に​​追加された新しい要素は、このバインディングを共有しません。

ユウはあなたが求めているものを使用することで達成できます .on() 

$("body").on("click", "#example tr", function(event){
  alert('You clicked row '+ ($(this).index()) );
});

デモ

于 2013-04-23T20:18:23.273 に答える