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

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.