jquery - jQuery の .append() メソッド内でクラスにアクセスするにはどうすればよいですか?

Question

データをテーブルに追加する Twitter 風のデータ ローダーを作成しました。これはすべて機能します。

次に、削除ボタンをクリックして行を削除できるようにする必要があります。これを行うために、画像に割り当てられたクラスとデータ属性を使用しています。これらはすべて、アプリケーションの他の場所で機能します。

ただし、これらのテーブル行は .append() メソッドによって生成されているため、クラスが認識されていないようです。コード (すぐ後に続きます) をコピーして表に貼り付け、[削除] ボタンをクリックすると、確かにダイアログが表示されます。

ここにテーブルがあります：

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="display" id="data-bookmarks">
    <caption>Bookmarks</caption>
    <thead>
        <tr>
            <th scope="col" id="bookmarks-item-name">Title / URL</th>
            <th scope="col" id="bookmarks-item-date">Date Added</th>
            <th scope="col" id="bookmarks-item-delete">x</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4"><em><a href="#load" onclick="paginate(10)">Load Bookmarks</a></em></td>
        </tr>
    </tfoot>
</table>

jQuery は次のとおりです。

<script type="text/javascript">
    var counter = 0;
    function paginate(limit) {
        counter=counter+limit;
        $(".flash").show();
        $(".flash").fadeIn(400).html("Loading...");
            $.ajax({
                url: "<?php echo config_item('base_url'); ?>notes/jq_get_bookmarks_by_note_as_object/" + '<?php echo strtolower($results['select_note'][0]['note_id']); ?>/' + counter,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                cache: false,
                success: function (element) {
                    $(".flash").hide();
                    $(".load-link").addClass("link-none");
                    for (var i=0;i<element.length;i++) {
                        $("#data-bookmarks").append('<tr><td><a href="<?php echo config_item('base_url'); ?>bookmarks/view/' + element[i].bookmark_id + '"><img src="<?php echo config_item('base_url'); ?>library/images/ui/icons/tables/view.png" alt="view" width="14" height="14" class="icons-actions" /></a>&nbsp;<a href="<?php echo config_item('base_url'); ?>bookmarks/visit/' + element[i].bookmark_id + '" target="_blank" rel="nofollow"><img src="<?php echo config_item('base_url'); ?>library/images/ui/icons/tables/link.png" alt="link" width="14" height="14" class="icons-actions" /></a>&nbsp;<a href="<?php echo config_item('base_url'); ?>bookmarks/edit/' + element[i].bookmark_id + '" title="Edit ' + element[i].title + '">&lsquo;' + element[i].title + '&rsquo;</a></td><td>' + element[i].creation + '</td><td align="left"><img src="<?php echo config_item('base_url'); ?>library/images/ui/buttons/delete.png" class="bookmark-delete" data-bookmark="' + element[i].bookmark_id + '" height="14" width="14" /></td></tr>');
                    }
                }
            }
        );
    }
    paginate(0);
</script>

ダイアログをトリガーして削除を実行するjQueryは次のとおりです。

$(document).ready(function() {
    $("#dialogue").hide();
    $('.bookmark-delete').click(function(event) {
        var id = $(this).attr("data-bookmark");
        event.preventDefault();
        $("a.action").attr("href", base_url + 'notes/bookmarks/delete/' + id);
        $("#dialogue").css({ position:"absolute", top: event.pageY+15, left: event.pageX-315 });
        $("#dialogue").show();
    });
    $('#close').click(function(event) {
        event.preventDefault();
        $("#dialogue").hide();
    });
});

そして最後に、ここにダイアログがあります：

<div class="dialogue" id="dialogue">
    <div class="message">
        <h3>Delete link to Bookmark</h3>
        <p>Do you want to delete the link to this Bookmark?</p>
    </div>
    <div class="divider"></div>
    <ul class="buttons">
        <li><div id="button-link"><a class="button-link action" href="#">Delete</a></div></li>
        <li><div id="button-link"><a class="button-link" href="#close" id="close">Cancel</a></div></li>
    </ul>
    <div class="cleaner"></div>
</div>

どこかの .append() メソッドの最後までスクロールすると、次のことがわかります。

class="bookmark-delete" data-bookmark="' + element[i].bookmark_id + '"

そして、jQuery がクラスを認識していないため、魔法が起こっていないように見えます。

何か案は？