为引导弹出窗口插入脚本

Question

我有一个 bootstrap 4 弹出框，其中包含来自 viewcomponent 元素（asp net core 3.1 项目）的列表。 此弹出框位于布局导航栏内（不确定是否相关），将鼠标悬停在其上后，列表应出现。 现在每个列表元素都正确显示，但是在我单击任何列表元素后，我想发送 ajax 发布请求，但我无法让我的 javascript 工作。我不确定是什么问题。是因为我的脚本仅在我将鼠标悬停在弹出框上时才加载吗？我是否错误地使用了事件？我尝试了很多变体来测试 JS 是否正常工作，并且似乎一切都失败了。 视图组件：

@model mymodel;

    <div class='list-group'>

        @foreach (var item in Model.Item)
        {

            <a href='@item.Url' class='btn list-group-item list-group-item-action mb-1'>You have been invited to join event: <b>@item.Name</b></a>

        }

        @foreach (var item in Model.AnotherItem)
        {

            <a id='lmao' href='#' onclick='doSomething(@item.Id);' class='list-group-item list-group-item-action mb-1'>You have been invited to join team: <b>@item.Name</b></a>
        }
    </div>

<script>
    $('#lmao').click(function () { MyFunction(); return false; });

    function MyFunction() {
        alert('hello');
        console.log(data);
        console.log(this);
    }
</script>

_带有弹出框的布局页面：

 <div class="navbar-collapse">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown">
                            Settings
                        </a>
                        ...
                            <a tabindex="0" class="dropdown-item pop" data-container="body" data-html="true" title="Your invitations" data-toggle="popover" data-placement="left" data-content="@await Component.InvokeAsync("InvitationList")" style="cursor: pointer;">Invitations (number coming from another viewcomponent)</a>
                            ...
                        </div>
                    </li>
                   ...

布局中的Popover JS：

<script>
        $('.pop').popover({
            trigger: 'manual',
            html: true
        })
            .on('mouseenter', function () {
                var _this = this;
                $(this).popover('show');
                $('.popover').on('mouseleave', function () {
                    $(_this).popover('hide');
                });
            }).on('mouseleave', function () {
                var _this = this;
                setTimeout(function () {
                    if (!$('.popover:hover').length) {
                        $(_this).popover('hide');
                    }
                }, 300);
            });

    </script>

我的弹出框工作正常，我看到从视图组件加载的项目，我可以按每个项目并转到预设的 href。 不起作用的是来自 viewcomponent 的 javascript，或者至少我没有测试它。我的最终目标是在弹出窗口中的任何项目被点击时进行 post call。

Answer 1

我测试了你的代码，发现如果直接在data-content中调用viewcomponent，ViewComponent中的jacascripts会被识别为html，所以永远不会被调用。相反，您可以单独为 viewcomponent 定义一个区域

<a id="invitations" tabindex="0" class="dropdown-item pop" data-container="body" data-html="true" title="Your invitations" data-toggle="popover" data-placement="left" style="cursor: pointer;" data-content="">invitations</a>

<div id="vc" style="display:none">
    @await Component.InvokeAsync("InvitationList")
</div>

使用js附加到data-content

$("#invitations").attr("data-content", $("#vc").html())

由于它是来自其他页面的新元素，处理程序不会绑定在该新元素上，您的点击功能应该是这样的：

<script>
    $('body').on('click', '#lmao', function () { MyFunction(); return false; });

    function MyFunction() {
        alert('hello');
        console.log(data);
        console.log(this);
    }

</script>

测试结果：