title: .on() event handler not firing?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  &lt;script&gt;
        $(document).ready(function () {
  
            $(document).on('click', 'th.default', function() {
              alert("hello world!");
            });
  
            $(document).on('click', '#columnHeaders', function()
            {
                alert('Hello world!');
            });
  
            /*$(document).bind('click', function (e) {
             var target = $(e.target);
             if (target.is('.default')) {
                e.preventDefault(); // if you want to cancel the event flow
                // do something
                alert('Hello world!');
             } else if (target.is('.myotherclass')) {
                e.preventDefault();
                // do something else
                alert('Nah');
             }
          });*/
        });
  
        /*var theParent = document.querySelector("#columnHeaders");
        theParent.addEventListener("click", doSomething, false);
  
        function doSomething(e) {
            if (e.target !== e.currentTarget) {
                var clickedItem = e.target.id;
                alert("Hello " + clickedItem);
            }
            e.stopPropagation();
        }*/
        //on click: show textbox, hide label
  
        function renameColumn(label_id)
        {
          alert('Entered rename' label_id);
          //change 'Rename' to 'Save'
          var elt = document.getElementById(label_id);
          if (elt.nodeName == "LABEL")
          {
            document.getElementById(label_id).innerHTML = 'Save';
            $(label_id).css('display', 'none');
          }
  
          var elt = document.getElementById(inputText_id)
          if (elt.nodeName == "INPUT")
          {
            $(inputText_id)
            .val($(label_id).text())
            .css('display','')
            .focus();
          }
        }
  
        //on blur
        function cancelRename(editText, column_id)
        {
          document.getElementById(label).innerHTML = 'Rename';
          $(editText).css('display', 'none');
          $(column_id)
          .css('display', '');
        }
  
        //on save
        function saveColumnName(label)
        {
          document.getElementById(label).innerHTML = 'Rename';
        }
    &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;meta name="description" content="jQuery Kanban Widget with Multiple Kanbans" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="&lt;?php echo base_url("assets/jqwidgets/styles/jqx.base.css"); ?&gt;"&gt;
    &lt;script type="text/javascript" src="&lt;?php echo base_url("assets/scripts/jquery-1.11.1.min.js");?&gt;"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="&lt;?php echo base_url("assets/jqwidgets/jqxcore.js");?&gt;"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="&lt;?php echo base_url("assets/jqwidgets/jqxsortable.js");?&gt;"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="&lt;?php echo base_url("assets/jqwidgets/jqxkanban.js");?&gt;"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="&lt;?php echo base_url("assets/scripts/demos.js");?&gt;"&gt;&lt;/script&gt;
    &lt;!--&lt;script type="text/javascript" src="data.js"&gt;&lt;/script&gt;--&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
    &lt;a href="&lt;?php echo base_url();?&gt;index.php/dashboard/reset"&gt;Reset&lt;/a&gt;
    &lt;a href="&lt;?php echo base_url();?&gt;index.php?/dashboard/insertNewColumn/1/0"&gt;Add Column&lt;/a&gt;
    &lt;a href="&lt;?php echo base_url();?&gt;index.php?/dashboard/insertNewRow/1"&gt;Add Row&lt;/a&gt;
      &lt;?php
        $levels = $columnData[0];
        $maxrowspan = $columnData[1];
        $max_parent_colspan = 0;
        $num_rows = $rowData[1];
        $rows = $rowData[0];
        $td_var = '';
        $default_column = false;
  
  ?&gt;
  
  &lt;?php
        echo "&lt;table id=\"columnHeaders\" border=1 style='font-family: Arial; font-size:13' layout=auto&gt;";
        foreach ($levels as $level_id =&gt; $level_array) 
        {
          echo "&lt;tr&gt;";
          if (!$default_column)
          {
            echo "&lt;th rowspan=".($maxrowspan+1)." class='default'&gt;Default&lt;/th&gt;";
            $default_column = true;
          }
  
          if ($level_id &gt; 1)
          {
            foreach ($level_array as $child_column_id =&gt; $array_properties) 
            {
              $colspan = $array_properties['child_colspan'];
              $is_parent = $array_properties['has_child'];
  
              if ($colspan == 1 &amp;&amp; !$is_parent) 
              {
                foreach ($level_array as $id =&gt; $array_props)
                {
                  $cols = $array_props['child_colspan'];
                  $is_p = $array_props['has_child'];
                  $td_var = "&lt;td&gt;
  
                  &lt;label id=\"col_{$child_column_id}\"&gt;{$child_column_id}&lt;/label&gt;
  
                  &lt;input type=\"text\" id=\"text_{$child_column_id}\" style=\"display:none\"&gt;
  
                   &lt;br&gt;
                   &lt;span id=\"{$child_column_id}\" class=\"rename\"&gt;Rename&lt;/span&gt; /
  
                   &lt;a href=\"".base_url()."index.php/dashboard/deleteCol/{$child_column_id}\"&gt; Delete&lt;/a&gt; /
  
                   &lt;a href=\"".base_url()."index.php/dashboard/insertNewColumn/1/{$child_column_id}\"&gt;Split&lt;/a&gt;
  
                   &lt;/td&gt;";
  
                  if ($cols &gt; 0 &amp;&amp; $id != $child_column_id &amp;&amp; $is_p) 
                  {
                    $td_var = "&lt;td rowspan={$maxrowspan}&gt; &lt;label id={$child_column_id}&gt;{$child_column_id}&lt;/label&gt;&lt;br&gt; Rename / &lt;a href=\"".base_url()."index.php/dashboard/deleteCol/{$child_column_id}\"&gt; Delete&lt;/a&gt; / &lt;a href=\"".base_url()."index.php/dashboard/insertNewColumn/1/{$child_column_id}\"&gt;Split&lt;/a&gt; &lt;/td&gt;";
                    break;
                  }
                }
              } else {
                $td_var = "&lt;td colspan={$colspan}&gt; &lt;label id={$child_column_id}&gt;{$child_column_id}&lt;/label&gt; &lt;br&gt; Rename / &lt;a href=\"".base_url()."index.php/dashboard/deleteCol/{$child_column_id}\"&gt; Delete&lt;/a&gt; / &lt;a href=\"".base_url()."index.php/dashboard/insertNewColumn/1/{$child_column_id}\"&gt;Split&lt;/a&gt; &lt;/td&gt;";
              }
              echo $td_var;
            }
          }
          else
          {
            foreach($level_array as $level1_parent_col_id =&gt; $parent_properties)
            {
              $colspan = $parent_properties['colspan'];
              if ($parent_properties['num_of_children'] &gt; 0)
              {
                echo "&lt;th colspan = {$colspan}&gt; &lt;label id={$level1_parent_col_id}&gt;{$level1_parent_col_id}&lt;/label&gt; &lt;br&gt; Rename / &lt;a href=\"".base_url()."index.php/dashboard/deleteCol/{$level1_parent_col_id}\"&gt; Delete&lt;/a&gt; / &lt;a href=\"".base_url()."index.php/dashboard/insertNewColumn/1/{$level1_parent_col_id}\"&gt;Split&lt;/a&gt; &lt;/th&gt;";
              } else {
                echo "&lt;th rowspan = ".(++$maxrowspan)."&gt;&lt;label id={$level1_parent_col_id}&gt;{$level1_parent_col_id}&lt;/label&gt; &lt;br&gt; Rename / &lt;a href=\"".base_url()."index.php/dashboard/deleteCol/{$level1_parent_col_id}\"&gt; Delete&lt;/a&gt; / &lt;a href=\"".base_url()."index.php/dashboard/insertNewColumn/1/{$level1_parent_col_id}\"&gt;Split&lt;/a&gt; &lt;/th&gt;";
              }
              $max_parent_colspan += $colspan;
            }
          }
          echo "&lt;/tr&gt;";
        }
        echo "&lt;/table&gt;";
       ?&gt;
  
       &lt;table border=1&gt;
       &lt;?php
  
       foreach($rows as $r)
       {
         echo "&lt;tr&gt;";
         echo "&lt;td&gt;  &lt;br&gt; Rename / &lt;a href=\"".base_url()."index.php/dashboard/deleteRow/{$r-&gt;id}\"&gt; Delete&lt;/a&gt; &lt;/td&gt;";
  
         for ($y = 0; $y &lt; $max_parent_colspan; $y++)
         {
           echo "&lt;td&gt; Row {$y} &lt;/td&gt;";
         }
  
         echo "&lt;/tr&gt;";
       }
        ?&gt;
       &lt;/table&gt;
  
  &lt;br /&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm trying to bind multiple elements to a single event listener. I tried it first for a single element, the <code>th.default</code>, but the event never fires.</p>
  
  <pre><code>$(document).ready(function () {
      $(document).on('click', 'th.default', function() {
              alert("hello world!");
      });
  });
  
  &lt;?php
        //not inside a &lt;div&gt; nor &lt;body&gt;
        echo "&lt;table id=\"columnHeaders\" border=1 style='font-family: Arial; font-size:13' layout=auto&gt;";
        foreach ($levels as $level_id =&gt; $level_array) //Loop through each level
        {
          echo "&lt;tr&gt;";
          if (!$default_column)
          {
            echo "&lt;th rowspan=".($maxrowspan+1)." class=\"default\"&gt;Default&lt;/td&gt;";
            $default_column = true;
          }
           //More cells below
  }
  ?&gt;
  </code></pre>