Вставка скрипта для bootstrap popover

Question

У меня есть всплывающее окно bootstrap 4 со списком внутри, которое происходит из элемента viewcomponent (проект asp net core 3.1). Это всплывающее окно находится внутри панели навигации макета (не уверен, актуально ли это), и после наведения на него должен появиться список. Теперь каждый элемент списка отображается правильно, но после того, как я щелкну любой из элементов списка, я хочу отправить ajax post-запрос, но я не могу заставить свой javascript работать. Я не уверен, в чем проблема. Это потому, что мой скрипт загружается только при наведении курсора на всплывающее окно? Я неправильно использую события? Я перепробовал множество вариантов, чтобы проверить, работает ли JS и похоже, что все не удалось. ViewComponent:

@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>

_Layout Page с всплывающим окном:

 <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 в Layout:

<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>

Моя всплывающая подсказка работает правильно, я вижу элементы загружается из компонента просмотра, я могу нажать на каждом из них и go, чтобы установить href. Что не работает, так это javascript, исходящее из viewcomponent, или, по крайней мере, я не могу его протестировать. Моя конечная цель - сделать пост-вызов, если будет нажат любой из элементов во всплывающем окне.

Answer 1

Я проверил ваши коды и обнаружил, что если вы напрямую вызываете viewcomponent в data-content, jacascripts в ViewComponent будут преобразованы как html, поэтому он никогда не будет вызван. Вместо этого вы можете определить область для компонента просмотра отдельно

<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, чтобы добавить его к содержимому данных

$("#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>

Результат теста: