javascript - .on() 事件处理程序未触发？

Question

  <script>
      $(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';
      }
  </script>

<meta name="description" content="jQuery Kanban Widget with Multiple Kanbans" />
  <link rel="stylesheet" type="text/css" href="<?php echo base_url("assets/jqwidgets/styles/jqx.base.css"); ?>">
  <script type="text/javascript" src="<?php echo base_url("assets/scripts/jquery-1.11.1.min.js");?>"></script>
  <script type="text/javascript" src="<?php echo base_url("assets/jqwidgets/jqxcore.js");?>"></script>
  <script type="text/javascript" src="<?php echo base_url("assets/jqwidgets/jqxsortable.js");?>"></script>
  <script type="text/javascript" src="<?php echo base_url("assets/jqwidgets/jqxkanban.js");?>"></script>
  <script type="text/javascript" src="<?php echo base_url("assets/scripts/demos.js");?>"></script>
  <!--<script type="text/javascript" src="data.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <a href="<?php echo base_url();?>index.php/dashboard/reset">Reset</a>
  <a href="<?php echo base_url();?>index.php?/dashboard/insertNewColumn/1/0">Add Column</a>
  <a href="<?php echo base_url();?>index.php?/dashboard/insertNewRow/1">Add Row</a>
    <?php
      $levels = $columnData[0];
      $maxrowspan = $columnData[1];
      $max_parent_colspan = 0;
      $num_rows = $rowData[1];
      $rows = $rowData[0];
      $td_var = '';
      $default_column = false;

?>

<?php
      echo "<table id=\"columnHeaders\" border=1 style='font-family: Arial; font-size:13' layout=auto>";
      foreach ($levels as $level_id => $level_array) 
      {
        echo "<tr>";
        if (!$default_column)
        {
          echo "<th rowspan=".($maxrowspan+1)." class='default'>Default</th>";
          $default_column = true;
        }

        if ($level_id > 1)
        {
          foreach ($level_array as $child_column_id => $array_properties) 
          {
            $colspan = $array_properties['child_colspan'];
            $is_parent = $array_properties['has_child'];

            if ($colspan == 1 && !$is_parent) 
            {
              foreach ($level_array as $id => $array_props)
              {
                $cols = $array_props['child_colspan'];
                $is_p = $array_props['has_child'];
                $td_var = "<td>

                <label id=\"col_{$child_column_id}\">{$child_column_id}</label>

                <input type=\"text\" id=\"text_{$child_column_id}\" style=\"display:none\">

                 <br>
                 <span id=\"{$child_column_id}\" class=\"rename\">Rename</span> /

                 <a href=\"".base_url()."index.php/dashboard/deleteCol/{$child_column_id}\"> Delete</a> /

                 <a href=\"".base_url()."index.php/dashboard/insertNewColumn/1/{$child_column_id}\">Split</a>

                 </td>";

                if ($cols > 0 && $id != $child_column_id && $is_p) 
                {
                  $td_var = "<td rowspan={$maxrowspan}> <label id={$child_column_id}>{$child_column_id}</label><br> Rename / <a href=\"".base_url()."index.php/dashboard/deleteCol/{$child_column_id}\"> Delete</a> / <a href=\"".base_url()."index.php/dashboard/insertNewColumn/1/{$child_column_id}\">Split</a> </td>";
                  break;
                }
              }
            } else {
              $td_var = "<td colspan={$colspan}> <label id={$child_column_id}>{$child_column_id}</label> <br> Rename / <a href=\"".base_url()."index.php/dashboard/deleteCol/{$child_column_id}\"> Delete</a> / <a href=\"".base_url()."index.php/dashboard/insertNewColumn/1/{$child_column_id}\">Split</a> </td>";
            }
            echo $td_var;
          }
        }
        else
        {
          foreach($level_array as $level1_parent_col_id => $parent_properties)
          {
            $colspan = $parent_properties['colspan'];
            if ($parent_properties['num_of_children'] > 0)
            {
              echo "<th colspan = {$colspan}> <label id={$level1_parent_col_id}>{$level1_parent_col_id}</label> <br> Rename / <a href=\"".base_url()."index.php/dashboard/deleteCol/{$level1_parent_col_id}\"> Delete</a> / <a href=\"".base_url()."index.php/dashboard/insertNewColumn/1/{$level1_parent_col_id}\">Split</a> </th>";
            } else {
              echo "<th rowspan = ".(++$maxrowspan)."><label id={$level1_parent_col_id}>{$level1_parent_col_id}</label> <br> Rename / <a href=\"".base_url()."index.php/dashboard/deleteCol/{$level1_parent_col_id}\"> Delete</a> / <a href=\"".base_url()."index.php/dashboard/insertNewColumn/1/{$level1_parent_col_id}\">Split</a> </th>";
            }
            $max_parent_colspan += $colspan;
          }
        }
        echo "</tr>";
      }
      echo "</table>";
     ?>

     <table border=1>
     <?php

     foreach($rows as $r)
     {
       echo "<tr>";
       echo "<td>  <br> Rename / <a href=\"".base_url()."index.php/dashboard/deleteRow/{$r->id}\"> Delete</a> </td>";

       for ($y = 0; $y < $max_parent_colspan; $y++)
       {
         echo "<td> Row {$y} </td>";
       }

       echo "</tr>";
     }
      ?>
     </table>

<br />
  </div>

我正在尝试将多个元素绑定(bind)到单个事件监听器。我首先针对单个元素尝试了它，即 th.default，但该事件从未触发。

$(document).ready(function () {
    $(document).on('click', 'th.default', function() {
            alert("hello world!");
    });
});

<?php
      //not inside a <div> nor <body>
      echo "<table id=\"columnHeaders\" border=1 style='font-family: Arial; font-size:13' layout=auto>";
      foreach ($levels as $level_id => $level_array) //Loop through each level
      {
        echo "<tr>";
        if (!$default_column)
        {
          echo "<th rowspan=".($maxrowspan+1)." class=\"default\">Default</td>";
          $default_column = true;
        }
         //More cells below
}
?>

Answer 1

由于“on”相对于元素起作用，因此您必须提供一个存在的元素来监听事件，例如“body”，它始终存在于页面上。

$(document).ready(function () {
    $('body').on('click', 'th.default', function(event) {
            alert("hello world!");
    });
});

这似乎是重复的，请看这个question $(document).on("click"... not working?