jQuery: trying hook a function to the onclick when dynamically adding a DOM element, but it immediately executes the function instead

Question

I am using jQuery to dynamically (I mean at runtime) add a span element to my page's DOM: ``` // create add task button $(document.createElement("span")) .attr({ id: activityNameHyphened + "-NewButton", name: activityNameHyphened + "-NewButton" }) .addClass("smallButton") .appendTo(cell1) .click(CreateTaskRow(ActivityName)); ``` The problem is the last line: I thought it would add CreateTaskRow(ActivityName) as the handler for the onclick event of the span, just like: ``` ``` which is what I want - but when I run it in the browser, I can see using the debugger that at this line it immediately runs the function instead. If I can make it clearer: CreateTaskRow() runs when I'm trying to add it to the onclick (I want it to run only when the user actually clicks the span). Any idea what I'm doing wrong? (and please let me know if my question isn't clear enough)

Accepted Answer

You are actually calling the function and passing the result to the `.click()` event handler. Try it with a closure (anonymous function) instead:

```
.click(function() {
    CreateTaskRow(ActivityName);
});
```

The closure will not be run until the `click` event is fired.

jQuery: trying hook a function to the onclick when dynamically adding a DOM element, but it immediately executes the function instead

Solution

Problem