Bootstrap popover不在object中工作

时间:2014-06-26 11:32:50

标签: javascript jquery popover

我正在尝试为表格网格调整创建自己的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也包含在页面底部。

2 个答案:

答案 0 :(得分: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的值的更多内容可以找到here

答案 1 :(得分:0)

感谢所有人。我解决了原因是我通过ajax生成popover内容:

initButton: function(){

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

},

popoverContent()是服务器端的ajax请求。