Question

I hope I can explain my self good.
I want to create a function that has arguments which one of the arguments is a jQuery function that would be executed on event of an element that would be created after the call of the original function (it is very similar to dialog). Here is the code of what I am trying to do:

function messageBox(messageOptions) {
    var default_args = {
        'header': null,
        'text': null,
        'acceptButtonText': 'ok',
        'acceptButtonOnClickFunction': null,
        'cancelButtonText': 'cancel',
        'cancelButtonOnClickFunction': function() {
            $('#cancel_message_box_div_button_span').click(function() {
                $('.greyBackground').remove();
            })
        }
    };
    for (var index in default_args) {
        if (typeof messageOptions[index] == "undefined") messageOptions[index] = default_args[index];
    }

    putGrayBackground();
    var messageBoxElement = '<div class="messageBoxDiv">';
    messageBoxElement += '<legend class="messageBoxDivHeader">';
    messageBoxElement += messageOptions.header;
    messageBoxElement += '</legend>';
    messageBoxElement += '<div class="messageBoxDivText">';
    messageBoxElement += messageOptions.text;
    messageBoxElement += '</div>';
    messageBoxElement += '<div class="messageBoxDivButtons">';
    messageBoxElement += '<div id="cancel_message_box_div_button_span" class="messageBoxDivButtonSpan">';
    messageBoxElement += messageOptions.cancelButtonText;
    messageBoxElement += '</div>';
    messageBoxElement += '</div>';
    messageBoxElement += '</div>';
    $('.greyBackground').append(messageBoxElement);
}​

The code suppose to create an element that has a span which when it would be clicked will call the function under ‘cancelButtonOnClickFunction’ argument.
As you can see there are default parameters, one of them is ‘cancelButtonOnClickFunction’. After I have created the element I append it, I think it doesn’t works because the ‘cancelButtonOnClickFunction’ inner function is called before the element is created. I would ask how to make it work.

Answer 1

The problem isn’t that your code is executed too early. In fact it isn’t executed at all! Let’s just get to fixing the code and along the way we will learn why the original your version didn’t work.

First, we change something in your default arguments:

    [..]
    'cancelButtonOnClickFunction': function() {
            $('.greyBackground').remove();
        })
    [..]

Basically, you would want your users to define their event handler (or callback) in exactly the same way they would if they were using jquery directly, so you should be doing the same thing in your default argument.

Now here is the catch: you are not executing a function here. You are defining a function and assigning that function to the cancelButtonOnClickFunction property. This is possible because in javascript, functions are first class citizens. In less fancy words, that means that functions are “values” in much the same way numbers, strings and (other) objects are and as such, you can do a lot of things with them like using them as arguments or assigning them to variables. (In fact, in javascript function a() {alert('a')} is just another way to write var a = function() {alert('a')}, but I am getting way off track here.)

Alright, so now that we got that piece of code down, we now need to make sure that the event is connected correctly. Because we aren’t stuck doing this at the top of the function, we can just do so after the html has been generated and we won’t have to worry about the assignment happening before the html is in place anymore:

    [..]
    $('.greyBackground').append(messageBoxElement);
    $('#cancel_message_box_div_button_span').click(messageOptions.cancelButtonOnClickFunction);
}

And that’s it, here we just supply the variable that holds the function instead of providing an anonymous function like we are used to when normally working with jquery. These two changes should solve the code and make sure it does what you want it to do. And hopefully my explanation along the way helped you understand a little more about the how and why.