如何使用 onClickEvent 将 setAttribute 添加到 var？答案

【问题标题】：How can I add setAttribute to a var with an onClickEvent?如何使用 onClickEvent 将 setAttribute 添加到 var？
【发布时间】：2015-11-24 16:22:47
【问题描述】：

我正在使用自动完成脚本创建一个搜索字段，我可以在其中搜索从我的数据库调用的用户列表。当结果显示在下拉列表中时，我希望人们能够单击用户名并弹出一个带有他们信息的花式框窗口。这是我正在使用的脚本：

<!-- Autocomplete search field. -->
<div class="input-group" style="float: right; width: 350px; margin-bottom: 10px;">
    <span class="input-group-addon"><i class="fa fa-fw fa-search"></i></span>
    <input type="text" id="search-tenants" placeholder="Search tenants..."/>
</div>
<script>
    var options = {
        data: [
            <?php 
                foreach ($usersList as $users) { 
                    $count++; ?> '<?=$users->getFirstName()?> <?=$users->getLastName()?>', <? 
                } 
            ?>
        ],
        list: {
            match: { enabled: true },
            onClickEvent: function() {
                $("td.tenant-name .info-card")[0].click();
            },
        }
    };
    $("#search-tenants").easyAutocomplete(options);
</script>

如果我要在foreach 语句中的结果周围添加一个锚点和必要的属性（如下所示），fancybox 会按预期工作，但您可以在输入字段中看到所有代码。

<?php 
    foreach ($usersList as $users) { 
        $count++; ?> '<a class="info-card" data-fancybox-type="iframe" href="users.php?userid=<?=$users->getUserId()?>&mode=view"><?=$users->getFirstName()?> <?=$users->getLastName()?></a>', <? 
    } 
?>

所以我想问一下：在结果中添加具有类和属性的锚点的正确 JavaScript 方法是什么？我知道某处应该有setAttribute，但我不确定在哪里。

【问题讨论】：

那么您想知道如何通过 Javascript 将 DOM 元素添加到您的页面吗？

标签： javascript jquery-autocomplete setattribute

【解决方案1】：

您可以使用 jQuery appendTo。 http://api.jquery.com/appendto/

您将构建您的元素（在本例中为锚标记），然后将其附加到另一个元素。

$( "<p>Test</p>" ).appendTo( ".inner" );

在此链接示例中，它将段落元素附加到具有“内部”类的每个元素。

希望对你有帮助。

【讨论】：