0

我编写了一个 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 没有识别类。

有任何想法吗？

4

1 回答 1

3

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

如果 jQuery >= 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 >= 1.4.2 并且 < 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 > 1.3 并且 < 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();
    });
于 2013-05-29T09:13:39.263 回答