javascript - jquery 似乎无法在 bootstrap 4 popover 内工作

Question

我想通过 jquery (jquery-3.2.1.min.js) 和 ajax 从引导弹出窗口内部发送数据。 弹出窗口工作正常，但我无法让提交工作。

我用以下方法初始化了弹出窗口

$(document).ready(function() {

    $(function(){

        $("[data-toggle=popover]").popover({
            html : true,
            content: function() {
                var content = $(this).attr("data-popover-content");
                return $(content).children(".popover-body").html();
            },
            title: function() {
                var title = $(this).attr("data-popover-content");
                return $(title).children(".popover-heading").html();
            }
        });

    });
});

这是 html 触发器:

<span tabindex="0" role="button" data-toggle="popover" data-placement="right" data-popover-content="#comment230" data-original-title="" title="">
    <img src="/ds/img/comment.svg" alt="comment" height="16px">
</span>

这是弹出窗口内的 html:

<div id="comment225" style="display:none;">
    <div class="popover-heading">Comments</div>
    <div class="popover-body">
        <div class="commentbody">
            <div>
                <fieldset>
                    <div class="input text">
                        <label for="comment">Comment</label>
                        <input name="comment" id="comment" type="text" />
                    </div>
                </fieldset>
                <button class="submittest" id="acomment225button">Test</button>
            </div>
        </div>
    </div>
</div>  

出于测试原因，我这样做了:

$(".submittest").click(function(e) {
    alert('test');
    e.preventDefault();
});

警报无法通过弹出窗口内的按钮起作用，但可以通过放置在页面其余部分的按钮起作用。 我怎样才能让它发挥作用？

Answer 1

当您订阅事件时，这些 DOM 元素不存在。

您需要以这种方式连接事件:

$(document).on("click", ".submittest", function(e){
   alert("test");
});