0

私の HTML ドキュメントには、ドキュメントが完全に読み込まれると、jQuery によって自動的に入力される、空のテーブル本体を持つテーブルがあります。テーブル本体は PHP スクリプトによって生成され、jQuery は単純な GET 要求でコンテンツを取得します。

これが私のPHPコードです...

<?php

// ...
// ...
// Just take a look at the following two lines,
// the other code is not important in this case.
while ($tableDataRow = $tableData->fetch_assoc())
    echo '<tr><td>'. $tableDataRow['id']. '</td><td>'. $tableDataRow['name']. '</td><td><a href="#" class="delete-row" data-id="'. $tableDataRow['id']. '">Delete</a></td></tr>';

?>

出力は次のようになります...

<tr><td>1</td><td>Nadine</td><td><a href="#" class="delete-row" data-id="1">Delete</a></td></tr><tr><td>2</td><td>Nicole</td><td><a href="#" class="delete-row" data-id="2">Delete</a></td></tr>

すべてが完璧に機能します。唯一の問題は、クリック イベントが発生した場合に jQuery が反応しないことです。私のjQueryコードは次のようになります...

$(document).ready(function() {
    $(".delete-row").click(function(event) { // "a[class=delete-row]" does not work, too. But "*" works for every element, even for the links?!
        event.preventDefault();
        alert("You clicked on that link!")
    });
});
4

4 に答える 4

2

委任を使用する:

$(document).ready(function() {
    $("#mytable").on("click",".delete-row",function(event) { // "a[class=delete-row]" does not work, too. But "*" works for every element, even for the links?!
        event.preventDefault();
        alert("You clicked on that link!")
    });
});
于 2013-07-31T12:52:31.827 に答える
2

.click()bind()基本的にDOMのスナップショットを取得するjQueryのメソッドを利用します。この場合、そのスナップショットはドキュメントの準備ができたときに生成されます。

PHP コードはページに動的に追加されるため、これはドキュメント対応の DOM スナップショットには含まれません。このため、jQuery にはon()代わりに使用できるメソッドがあります。

$("table").on('click', '.delete-row', function() { ... });

これは、イベント委任として知られています。

于 2013-07-31T12:53:07.640 に答える
1

イベントはページの生成時にバインドされますが、テーブルは後でアタッチされるため、「クリック」の代わりに「オン」などの jQuery の最新のイベント バインド メソッドを使用する必要があります。

于 2013-07-31T12:52:46.740 に答える
1

この問題は、ページが読み込まれた後に要素が DOM に追加されたことが原因のようです (IE. ajax リクエストを介し$(".delete-row").click(function(event) {});て)。

$('.parentElement').on('click','.delete-row',function() {
   event.preventDefault();
  alert("You clicked on that link!");
});

.parentElementajax で追加された html の親であるが、それ自体は動的に追加されていない要素になります。

于 2013-07-31T12:53:01.877 に答える