Execute a method passed as parameter to jquery function

Question

I am very new to jQuery world, sorry if this is too basic a question. I have a jQuery function to create button dynamically:

function createButton(element, id, caption, leftPosition) {
    if (element == null || element.length < 1) return;

    var buttonTable = $("<table id='" + id + "'>");    
    buttonTable.addClass("togglebtn");
    buttonTable.css("left", left);

    var trow = $("<tr>");
    $("<td>")
        .text(cellText)
        .data("buttonname", caption)
        .click(function () {
            //alert("Clicked Col=" + $(this).data("buttonname"));
            TestButtonClick();
        })
        .appendTo(trow);
    trow.appendTo(buttonTable);
    buttonTable.appendTo(element);
}

Since this is a general method to create buttons, I want to add a click event to it so that the calling program can execute it's own method on click event. I mean I want to pass the client method name as parameter to createButton method which should eventually execute it on click. How is it possible to do and how to call the createButton method with that parameter?

You could try var btn = $('<button/>')

Stefan Ticu
– Stefan Ticu

2011-10-10 15:10:36 +00:00
Commented Oct 10, 2011 at 15:10 — Stefan Ticu
– Stefan Ticu, Commented Oct 10, 2011 at 15:10

Sri Reddy · Accepted Answer · 2011-10-10 15:11:38Z

3

Sorry it was really a very stupid of me to post this question without trying enough. I got the answer. Here is what I did:

function createButton(element, id, caption, leftPosition, callbackfunction) {
//do something
callbackfunction();
}

Calling program:

createButton($("#tbl"), "btnSave", "Save", "100px", function () { TestButtonClick() });

answered Oct 10, 2011 at 15:11

Sri Reddy

7,05422 gold badges76 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

s4y Over a year ago

FWIW, you can also pass in a function directly, like this: createButton(…, …, …, …, TestButtonClick);

Sri Reddy Over a year ago

Then how to call it within the function? Should I just say TestButtonClick();

s4y Over a year ago

Nope. Passing in TestButtonClick works exactly the same way as passing in function(){ TestButtonClick(); }! They’re both functions, but in the second case you’re passing in a function literal, and in the first case you’re passing in a function from the variable TestButtonClick.

s4y Over a year ago

(So, you can just do callbackfunction() in both cases.)

s4y Over a year ago

One final bit of clarification… remember, named functions in JavaScript aren't magic — they’re just variables that happen to contain functions. So, passing a function, by name, as an argument to another function, is just like passing any other variable to a function.

Chris · Accepted Answer · 2011-10-10 15:29:17Z

1

Looks like I read a little too far into your question. I thought you also wanted to pass a parameter to the event handler. My answer still works, it just does a little bit extra.

You can use the call method to call another method with certain parameters. You can also pass a function into another function as a parameter. Something like this:

function createButton(element, id, caption, leftPosition, clickHandler) {
    // your stuff
    .click(function() {
        clickHandler.call(this, yourParam);
    })
    // the rest of your stuff
}

function onClick(aParam) {
    console.log(this);
    console.log(aParam);
}

createButton($("<element/>"), "id", "caption", "leftPos", onClick);

Here's a fiddle for an example.

edited Oct 10, 2011 at 15:29

answered Oct 10, 2011 at 15:09

Chris

4,4711 gold badge30 silver badges35 bronze badges

1 Comment

Sri Reddy Over a year ago

thanks for you answer and it is really helpful. I meant passing the function as parameter. But this is really a good stuff to remember. thanks again.

Collectives™ on Stack Overflow

Execute a method passed as parameter to jquery function

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related