Question

我正在尝试使用右键创建可重用的Header对象。单击按钮时我的回调方法出现问题。它永远不会被召唤。

我的对象：

myHeader:function(params)   
{       
    opt = {
        title: "Title",  //header tittle
        fs: PrecApp.DEFAULT_HEADER_FONTSIZE, //font size
        ignoreStack :true, //ignore stack
        height: "70", //header height
        rightButton: {
            show :false, //show right button
            background: "none", //background for right button
            text: "Button", //text for right button
            width: "auto",
            height:"auto",              
            color:"black",
            fontize:1,
            extraCss: null,
            onClick:function(){}
        }
    }
for (i in params) opt[i] = params[i];

    if (opt.rightButton.show){
        var right = $("#header .right");            
        right.click(opt.rightButton.onClick);           

    }       
}

在我的HTML中：

function updateLayout(){
                PrecAppComponents.myHeader({
                    title:"My Title",
                    fs:1.5,
                    height:50,
                    rightButton:{
                        show:true,
                        background:"#ffff00",
                        text:"Right",
                        width:70,
                        height:30,
                        fontsize:1.1,
                        extraCss: {"float":"left", "font-size":"0.5em"},
                        onClick: PrecAppComponents.toggleDarkOverlay(true)

                    }
}

其他一切都很好。如果我替换

right.click(opt.rightButton.onClick);

带

 right.click(function(
  console.log("clicked")
));

工作正常。我做错了什么？

Answer 1

看起来你的onClick选项正在调用一个函数。除非该调用返回另一个函数，否则这将不起作用：

onClick: PrecAppComponents.toggleDarkOverlay(true)

您必须将其更改为：

onClick: function() {
  PrecAppComponents.toggleDarkOverlay(true);
}

// or with bind, perhaps

onClick: PrecAppComponents.toggleDarkOverlay.bind(PrecAppComponents, true);

Answer 2

在匿名函数中尝试封装：

right.click(function(){opt.rightButton.onClick();});

Answer 3

似乎PrecAppComponents.toggleDarkOverlay(true) 不返回函数以作为事件处理程序调用 - 您立即执行它。您需要使用

function(e) {
    PrecAppComponents.toggleDarkOverlay(true);
}

或

PrecAppComponents.toggleDarkOverlay.bind(PrecAppComponents, true)

是不是调用了Javascript回调方法？

3 个答案: