Bootstrap Popover在對象中不起作用

Question

我正在嘗試制作自己的js類以進行表格網格調整（隱藏列），而我的彈出按鈕不起作用。

當我在頁面上使用所有這些功能時，它將起作用，但是當我放入原型時，它將失敗。

這是我的grid.js ：

function Grid(element, tableId, module){
    return this.init(element, tableId, module);
};

Grid.prototype = {

    grid: [],

    element: "",

    popover: null,

    tableId: "",

    module: "",

    backEndURL: location.href,

    formId: "#grid_form",

    wrapper: "#grid_entities",

    init: function(element, tableId, module){

            this.element = element;
            this.tableId = tableId;
            this.module = module;

            this.initButton();
            this.addOnClickListner();


    },

    initButton: function(){

        this.popover = $(this.element).popover({
            placement: "bottom",
            html: true,
            content: this.getPopoverContent()
        });

    },
...

index.php文件：

<div id="filterButtons">
    <i class="left iconfilter" id="filterButton" data-toggle="popover"></i>
    <i class="left iconlayout" id="gridButton" data-toggle="popover"></i>
</div>
...
<script>
$(document).ready(function () {
    var grid = new Grid(...);
});
</script>

頁面底部還包含Grid.js。

Answer 1

我沒有看到你的addOnClickListener，但我懷疑這是一個問題this 。 您的構造函數不應返回任何內容。 因此，您可以執行以下操作：

function Grid(element, tableId, module){
    this.init(element, tableId, module);
};

Grid.prototype = {
    //...
    constructor:Grid,
    addOnClickListner:function(){
        var me = this;
        return function(e){
            //e is the event, e.target is the clicked element
            //me is the Grid instance
            console.log("button clicked, e is:",e," and this is:"
              ,this," and me is:",me);
            me.whateverYouHaveInOnClickListener();
        }
    }

錯誤可能會有幫助，在Chrome或Firefox（安裝了Firebug插件）中，按F12鍵，查看控制台中是否有任何錯誤。 執行console.log以查看變量的值。

更多關於原型，構造函數和值this可以找到這里 。

Answer 2

謝謝大家。 我解決了。 原因是我通過ajax生成了popover內容：

initButton: function(){

    this.popover = $(this.element).popover({
        placement: "bottom",
        html: true,
        trigger: 'click',
        content: this.popoverContent
    });

},

popoverContent（）是對服務器端的ajax請求。