javascript - Jquery 附加到标签

Question

在我的 vue.js 项目中，我有这个模板:

<template>
    <div v-if="!isEmpty(media)">
        <div class="flex wrap">            
            <div v-for="file in media" :key="file.id" @click.prevent="action(file)">
                <div>
                    <a href="/file/93">
                        <img v-bind:src="fileType(file.file_name)" class="media-file" :alt="file.name" :title="file.name"/>
                    </a>
                </div>
            </div>
        </div>

        <div v-if="context == 'destroy'">
            <p>Klik op het bestand om deze te verwijderen.</p>
        </div>
    </div>
</template>

只是为了测试我已经硬编码的海豚 <a href="/file/93"> .

现在当有人点击图像 action(file)被触发。

这里我用 jquery 添加了一些内容，如下所示:

alert('test');
$('<a href="/file/93">')
    .attr('data-lightbox','roadtrip')
    .append('<img src="/file/93">')
    .addClass('test');

但是当我检查 chrome 中的 a 标签时没有任何反应。我在这里做错了什么？警报会弹出，所以这不是问题。 Jquery工作正常我已经检查过了。

Answer 1

$('<a href="/file/93">')不选择a你所拥有的元素。我认为它会创建一个新的 DOM 元素，但最终永远不会附加到文档中。

为了通过属性值选择元素，您可以这样做: $('[href="/file/93"]')