Question

我想通过jquery（jquery-3.2.1.min.js）和ajax从bootstrap popover内部发送数据。 popover运行正常，但我无法让提交工作。

我用

初始化了popover

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

这是popover中的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");
});

jquery似乎不能在bootstrap 4 popover中工作

1 个答案: