Question

I am trying to create a reusable Header object with a right button. I’m having problems on my callback method on the button click. It’s never called.

My object:

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);           

    }       
}

And in my 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)

                    }
}

Everything else is working fine. If i replace

right.click(opt.rightButton.onClick);       

with

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

It works fine. What am I doing wrong?

Answer 1

It looks like your onClick option is calling a function. Unless that call is returning another function, this won’t work:

onClick: PrecAppComponents.toggleDarkOverlay(true)

You’d have to change it to something like:

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

// or with bind, perhaps

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