Question

＆＃13;

  <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>

＆＃13;

<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>

＆＃13;

我试图将多个元素绑定到单个事件侦听器。我首先尝试使用单个元素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

我可以看到你通过php生成标记，所以在你的情况下不需要事件委托，因为标记生成是在服务器上完成的，这应该有效：

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

此外，您必须确保使用正确版本的jQuery，该版本具有.on()事件监听器，而不是1.7的早期版本。

其他

您必须在尝试执行的脚本之前放置jquery库。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
   // Here you should put your script.
</script>

Answer 2

因为＆＃39; on＆＃39;相对于你必须给予一个现有元素来监听事件的元素，例如＆＃39; body＆＃39;它始终存在于页面上。

function OnSuccess(response) {
    var objdata = (response.d);
    var pm = JSON.parse(objdata);
    var len = objdata.length;
    arr = $.map(pm, function(n, i) {
      var arr_temp = {
        0: n.Id,
        1: n.name,
        2: n.gender,
        3: n.pincode,
        4: n.City,
        5: n.DOB,
        6: n.Id
      }
      arrtest[i] = n.Id;
      return arr_temp;
    });

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

Answer 3

您的代码适用于我：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="columnHeaders" border=1 style='font-family: Arial; font-size:13' layout=auto>
  <tr><th class="default">Default</th><th class="default">Default</th><th class="default">Default</th></tr>
</table>

可能导致您的问题的一个问题是结束</td>标记不正确，应该是</th>。如果浏览器正在将开始标记更正为<td>，那么您的活动将无法启动。

.on（）事件处理程序没有触发？

3 个答案:

其他