bootstrap popover在第一次点击时不会工作

Question

如果我执行第一个代码，它就不会在第一次点击时显示，但会在第二次和其他点击中正常运行。

$('#addContaButton').click(function (e) {
    e.preventDefault();

    var url = '/Conta/Create';

    $.ajax({
        url: url,
        success: function (data) {
            $("#addContaButton").popover({
                html: true,
                content: data,
                title: function () {
                    return "Adicionar nova conta";
                },
                template: '<div class="popover popover-conta"><div class="arrow"></div><div class="popover-inner"><h2 class="popover-title"></h2><div class="popover-content"><p></p></div></div></div>',
                show: true
            });
        },
        async: false,
        error: function (req, status, errorObj) {
            alert("Ocorreu um erro ao tentar criar uma conta. Por favor, entre em contato.");
        }
    });

});

如果我像这样更改弹出功能的结束，它将执行相反的操作，它将仅在第一次单击时起作用，但将在第2次，第3次停止工作...

$('#addContaButton').click(function (e) {
    e.preventDefault();

    var url = '/Conta/Create';

    $.ajax({
        url: url,
        success: function (data) {
            $("#addContaButton").popover({
                html: true,
                content: data,
                title: function () {
                    return "Adicionar nova conta";
                },
                template: '<div class="popover popover-conta"><div class="arrow"></div><div class="popover-inner"><h2 class="popover-title"></h2><div class="popover-content"><p></p></div></div></div>'
            }).popover('show');
        },
        async: false,
        error: function (req, status, errorObj) {
            alert("Ocorreu um erro ao tentar criar uma conta. Por favor, entre em contato.");
        }
    });

});

我无法理解为什么......