jQuery & Ajax (for my calculator)

Check

I've spent a lot of time learning jQuery and Ajax. I'm close to the point where if I were presented with some code I can understand what is going on... a win by any measure!

Take this snippet:

$(".numbers").on("click", "button", function(event){

         .....

});

It took awhile to grasp what is (and what ISNT going on). There are so many concepts going on here: DOM traversal, mouse events, a function and all the jQuery goodness to go with it. 

Further, here are some variables presented in my calculator app's jQuery function:

var inputs = [];

var currentInput = "";

var action = "";

Aside from the basic knowledge of saying that inputs is an empty array and currentInput & action are empty strings, what are they meant to do?

From my understanding, currentInput and action will be populated with the clicks of the numbers and operation and then sent to an array for "storage". 

Next up are the delegates... wait, what does that mean? 

"Event delegation is an event handling technique where, instead of attaching event handlers directly to every element you want to listen to events on, you attach a single event handler to a parent element of those elements to listen for events occurring on it’s descendant elements."

...

...

...

At first brush I would say that this means something at some point has to do less work to get something done. Like, lets say we had 50 elements ... using event delegation we would "listen" for a particular event, rather than having then all ready to go. 

$(".numbers").on("click", "button", function(event){

var val1 = $currentInput.val();

//$currentInput.val(val1 + $(this).data("num"))

currentInput += $(this).data("num");

$displayField.val(currentInput);

});

Again, looks like we are going up the DOM to wait and hear... 

Allright, getting a bit late... some more work to do!