click handler ordering puzzle

by J. Jones

HTML

<div id="updatable">
    <div id="the_stuff">
        <div id="the_tabs">
            <ul>
                <li>
<a id="content_ToDo" class="droppableItem ui-droppable" href="#ToDo" name="ToDo">ToDo</a>

                </li>
            </ul>
            <div id="tabcontent"></div>
        </div>
    </div>
</div>

<button id='foo' onclick='clearConsole();'>clear console</button>
<button id='dynadd' onclick='addAnotherThing();'>add dynamic new thing</button>
<button id='dyndiv' onclick='addNewDiv();'>add dynamic div</button>
<div id="console">console log type thing</div>
<p>

JavaScript

var counter = 1;
var newThingCounter = 1;
function clickThatTabShit(me,ev,who) {
  //ev.preventDefault();
  //ev.stopPropagation();
    log("" + counter + ": I ("+$(me).text() + ") was selected by: " + who );
    counter += 1;
    return true;
}

function refreshTabClickHandlers() {
 // if we dynamically draw wrapper divs, the more specific click handlers
 // for future items inside them will not pick up on it because
 // the wrapper divs were not there when the document was first drawn...   
 // so even if we know they are coming in the future, the 'live' feature
 // does not work for this case
 $('#the_tabs ul li').off('click','a');
 $('#the_tabs ul').off('click','li');
 $('body #the_tabs').off('click','a');
 $('#the_tabs').off('click','a');
 $('#the_tabs').off('click','ul');
 $('body').off('click','a');
 $(document).off('click','a');

    $('#the_tabs ul li').on('click', 'a', function (ev) { 
        return clickThatTabShit(this, ev, 'the_tabs ul li a');
    });
    $('#the_tabs ul').on('click', 'li', function (ev) { 
        return clickThatTabShit(this, ev, 'the_tabs ul li');
    });
 $('body #the_tabs').on('click', 'a', function (ev) { 
    return clickThatTabShit(this, ev, 'body the_tabs a');
 });
$('#the_tabs').on('click', 'a', function (ev) { 
    return clickThatTabShit(this, ev, 'the_tabs a');
 });
    $('#the_tabs').on('click', 'ul', function (ev) { 
        return clickThatTabShit(this, ev, 'the_tabs ul');
    });
 $('body').on('click', 'a', function (ev) { 
        return clickThatTabShit(this, ev, 'body a');
 });
 $(document).on('click', 'a', function (ev) { 
     return clickThatTabShit(this, ev, 'document a');
 });
 } 

function clearConsole() {
    $('#console').html(" ");
}

function addNewDiv() {
   var thestuff = document.getElementById('the_stuff');
   var thetabs = document.createElement('div');
   thetabs.id='the_tabs';
   $(thestuff).html(thetabs); 
}

function addAnotherThing() {
   var thetabs = document.getElementById('the_tabs');
  ...