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没有认识到这个类。

有什么想法吗？

Answer 1

使用事件委托来处理动态添加元素的事件：

如果jQuery＆gt; = 1.7

$(document).ready(function() {
    $("#dialogue").hide();
    $("#data-bookmarks").on('click', '.bookmark-delete', 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();
    });
});

更新：基于@MichaelGeary的评论

如果jQuery＆gt; = 1.4.2且＆lt; 1.7

    $('#data-bookmarks').delegate('.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();
    });

如果jQuery＆gt; 1.3和＆lt; 1.4.2

    $('.bookmark-delete').live('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();
    });

如何在jQuery中访问.append（）方法中的类？

1 个答案: