Adding a click handler to Div

Hi there,
I have the following test code.  Basically, I want to make the testDataDiv invisble/visible when clicking on the TestTitleID.
I am not getting this to work.  For some reason the click callback is not called.  Can you please help with this.  Thank you.

http://jsfiddle.net/ambuli/onp95qqu/

 var jsonArray = [{Number:200, Date:24, Time:"2:2:2"}, {Number:200, Date:22, Time:"12:2:2"}, {Number:200, Date:24, Time:"21:2:2"}];


   var createGUI =  function(jsonArray) {
       var wrapperDiv = document.createElement("div");
       var titleDiv = document.createElement("div");
       titleDiv.id = "TestTitleID";
       titleDiv.style.border = "2px solid black";

       var titleNum = document.createElement("label");
       titleNum.innerHTML ="Number" + ":" + "200";
       titleDiv.appendChild(titleNum);

       var testDataDiv = document.createElement("div");
       testDataDiv.id = "TestDataDivID";
       var testDataTable = document.createElement("table");
       testDataTable.style.width = "100%";

       var testDataHeader = document.createElement("thead");
       testDataHeader.setAttribute("style", "border:1px solid grey; background-color:#d4d3d3;");
       var testDataHeaderDate = document.createElement("th");
       testDataHeaderDate.innerHTML = "Date";
       var testDataHeaderTime = document.createElement("th");
       testDataHeaderTime.innerHTML = "Time";


       var titleRow = document.createElement("tr");
       titleRow.appendChild(testDataHeaderDate);
       titleRow.appendChild(testDataHeaderTime);

       titleRow.setAttribute("style", "border:1px dotted black; background-color:#d3d3d3;");

       testDataHeader.appendChild(titleRow);
       testDataTable.appendChild(testDataHeader);
       var testDataBody = document.createElement("tbody");

       jsonArray.forEach(function(entry){
           var TableRow = document.createElement("tr");
           var colDate = document.createElement("td");
           colDate.style.textAlign = "center";
           colDate.innerHTML = entry.Date.toString();
           var colTime = document.createElement("td");
           colTime.style.textAlign = "center";
           colTime.innerHTML = entry.Time.toString();
           TableRow.appendChild(colDate);
           TableRow.appendChild(colTime);
           testDataBody.appendChild(TableRow);
       });

       testDataTable.appendChild(testDataBody);
       testDataDiv.appendChild(testDataTable);
       wrapperDiv.appendChild(titleDiv);
       wrapperDiv.appendChild(testDataDiv);
       return wrapperDiv;
   };

    var addToggleEvent = function(){
        return function(){
            console.log("clicked");
            document.getElementById("TestDataDivID").slideToggle(500, function(){
                if(document.getElementById("TestDataDivID").is(":visible")){
                    console.log("Changing to invisible");
                } else{
                    console.log("Changing to visible");
                }
            });
        };
    };
    var __addCollapseHandler = function(){
        document.getElementById("TestTitleID").click(addToggleEvent);
    };
    document.getElementById("TestID").appendChild(createGUI(jsonArray));
    __addCollapseHandler();

Open in new window

ambuliAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
Just add this to the end of your code:
$(function() {
    $("body").on("click", "#TestTitleID", function() {
        $("#TestDataDivID").toggle();
    });
});

Open in new window


Essentially, all your doing is making sure the event handler binds to an element that exists when the page loads.  Your elements are not there yet.

The other way is to initialise the event handler after creating and inserting the elements but I find the above easier :)
0
Tom BeckCommented:
I see two problems with your existing code.
 
1.) You are mixing jQuery and javascript on this line:

document.getElementById("TestTitleID").click(addToggleEvent);

What you want is this:

document.getElementById("TestTitleID").onclick = addToggleEvent;

2.) You have a function assigned to a variable returning an anonymous function. Not working. Just do this:

var addToggleEvent = function(){
            console.log("clicked");
            $("#TestDataDivID").slideToggle(500, function(){
                if($("#TestDataDivID").is(":visible")){
                    console.log("Changing to invisible");
                } else{
                    console.log("Changing to visible");
                }
            });
    };

Updated jsfiddle.

http://jsfiddle.net/onp95qqu/1/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.