Trying to give onclick functionality with jquery

Question

I've made a constructor in my script that formats <div>s so they can be created and destroyed on the fly.
Here's the function:

function formatDiv(target,divId,divClass,content,onclick)
{
    $("#"+target).append("<div id=\'" + divId + "\' class=\'" + divClass + "\' onclick=\'" + onclick + "\'>" + content +"</div>");

}

What I've been trying to do with this is pass in a function call as a string from an array, like "Main()" for main menu, and assigning it to the <div>'s onclick="" property. This worked fine prior to upgrading my code with jquery, but now when I click on <div>, the console returns: ReferenceError: Main is not defined.
Assuming that this was caused by the inclusion of jquery (as it still works in my old backup), I decided to update the constructor to us jquery's .click event handler,
resulting in this:

function formatDiv(target,divId,divClass,content,onclick)
{
    $("#"+target).append("<div id=\'" + divId + "\' class=\'" + divClass + "\'>" + content +"</div>");
    $("#"+divId).click(function(){$(onclick)});
}

, and I changed the formatting of the functions to be called in the array piping info to the onclick parameter from "Main()" to Main.
Now when clicking on a <div>, nothing happens at all, no errors or anything.

What is the best way to add an onclick handler to my <div>s? Am I using .click incorrectly? Jquery is still new to me (despite w3schools lessons and the tutorials on jquery's site), so I'm forced to guess that I'm using it incorrectly. Any help would be appreciated.

Here's the whole script:

$(document).ready(function () {


    $(Main);

    //main menu
    function Main()
    {
        var mainList = [">New List",">Show Lists",">Delete Lists"];
        var onClick = [NewList,Main,Main];
        var mainMenu = new Menu("Main Menu","menuMain",mainList,onClick);
        mainMenu.contentMenu();
    }

    //new list menu
    function NewList()
    {
        var mainList = ["> Create a New List"];
        var onClick = [Main];
        var newListMenu = new Menu("New List","menuMain",mainList,onClick);
        newListMenu.contentMenu();
    }

    //menu class
    function Menu(name,divClass,content,onclick)
    {
        $("#interface").html(null);

        //title
        formatDiv("interface",name,divClass,name,null);

        //return
        if(name != "Main Menu")
        {
            formatDiv(name,null,"return","^ Main Menu","Main()");
        }


        //display options
        this.contentMenu = function()
        {
            for(i=0; i<content.length; i++)
            {
                formatDiv("interface",content+i,"menuContent",content[i],onclick[i]);
            }
        }
    }


    //format divs
    function formatDiv(target,divId,divClass,content,onclick)
    {
        $("#"+target).append("<div id=\'" + divId + "\' class=\'" + divClass + "\'>" + content +"</div>");
        $("#"+divId).click(function(){$(onclick)});
    }


});

Answer 1

If you want to call a function just use functionName() instead of $(functionName) so change your code like this

$(document).ready(function () {
    Main();
    ....
            //display options
            this.contentMenu = function () {
                for (i = 0; i < content.length; i++) {
                    formatDiv("interface", "content" + i, "menuContent", content[i], onclick[i]);
                }
            }
    ....
    //format divs
    function formatDiv(target, divId, divClass, content, onclick) {
        $("#" + target).append("<div id=\'" + divId + "\' class=\'" + divClass + "\'>" + content + "</div>");
        $("#" + divId).click(onclick);
    }

Answer 2

Since your divs are created dynamically, you can't use .click() to bind as that only binds to elements that already exit when the script runs. You can however use .on() and bind to an existing element on the page. A worst case would be something like the body element but you can probably find an element closer to where the divs reside than that.

For example:

$("#"+target).append("<div id=\'" + divId + "\' class=\'" + divClass + "\'>" + content +"</div>");
$('body').on('click', "#"+divId, function(){$(onclick)});

From the .on() documentation:

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.

Answer 3

It sounds like you are looking for live() type functionality. You don't actually want to use .live() though. Here is a good answer to why you want to actually use .on().

Answer 4

lets start by how you are making a div with jquery. The way you are making a div is correct but not the most efficent. You can make any html element with jQuery with the following syntax

$('<NODE_NAME>')

so for a div it will be

$('<div>')

Now that we have a jquery object we need to add attributes to it, we do that with the attr method. we pass it an object of attribute name/value pairs.

$('<div>').attr({
    className: divClass ,
    id: divId 
});

Now, to add the content in the div we use the .html method

$('<div>')
.attr({
    className: divClass ,
    id: divId 
})
.html(
    content
);

and finally we add the onclick handler

$('<div>')
.attr({
    className: divClass ,
    id: divId 
})
.html(
    content
)
.click(
    onclick
);

What you are doing wrong with the onclick handler is wrapping it in $(). This does not make sense, you want to call the main function, not pass it as a value to the jquery function.