-1

私は次のコードを持っています

$(document).ready(function () 
{
    $("a").on('click',function()
    {
      console.log("foo");
    });

このコードは、データベースから行を生成し、データを tbody に配置します

$.getJSON('file.php', function(data) {
    $.each(data, function (index) {
            $('#my_table > tbody').append(''
                        +"<tr id= "+data[index].id_marca_c+">"
                         +"<td>"
                           +"<a href='#'><i class='icon-pencil'></i></a> "
                         +'</td>'
                        +'</tr>');
        });

ただし、関数内でリンクをクリックしても、javascript 用に生成されたテーブルでは機能しませんが、html コードでは機能します。

例：

<html>
 <!-- /code -->
  <a href='#'><i class='icon-pencil'></i></a>  <!-- /this-works -->
</html>

しかし、JavaScript用に生成されたテーブルでは、関数は機能しません。生成されたコードを修正しましたが、問題ありません。

編集: JavaScript コードhttp://pastebin.com/2GZ4J28Q

4

1 に答える 1

0

バインド時に存在せず、動的に追加される要素を持つイベントをバインドするには、委任されたイベントを使用する必要があります。動的に追加された要素またはドキュメントの親にイベントを委任できます。

$("#my_table").on('click',"a" ,function()
{
  console.log("foo");
});

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされた時点で存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります (参照) 。

于 2013-09-19T17:04:02.320 に答える