.on() event handler not firing?

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>

I'm trying to bind multiple elements to a single event listener. I tried it first for a single element, the th.default, but the event never fires.

$(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
}
?>

Using element inspector, check to see if the markup looks OK, and (at least in firefox) that you have a symbol (ev) next to a `th` with class `default` — Jaromanda X, Jan 09 '17 at 08:03
@herondale It really seems that you are getting some error at your browser's console. — Jai, Jan 09 '17 at 08:03
the fact that in the question the javascript is outside of `` block but **not** inside a ` — Jaromanda X, Jan 09 '17 at 08:05
nah, was just saying the code looked wrong - but I understand minimal examples can be odd looking — Jaromanda X, Jan 09 '17 at 08:18
@JaromandaX and i'm not quite sure what you meant by the symbol next to a `th`? — herondale, Jan 09 '17 at 08:18
if you use firefox developer tools inspector you'll see **ev** next to elements with an event handler — Jaromanda X, Jan 09 '17 at 08:19
@JaromandaX hmm, on firebug it says *There are no event listeners directly on this element.* — herondale, Jan 09 '17 at 08:25
yeah, I don't know firebug - built in debugger is far less rubbish than firebug — Jaromanda X, Jan 09 '17 at 08:26

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

As i can see you are generating your markup through php, so event delegation is not required in your case because markup generation is done at server and this should work:

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

Also you have to ensure you are using correct version of jQuery which has the .on() event listener as earlier versions from 1.7 don't have.

Additional

You have to put jquery library just before the script you are trying to execute.

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 09 '17 at 07:52

Jai

74,255
12
74
103

1

If he's using the wrong jquery version he'll get an error in the Javascript console. But he hasn't yet answered the question of whether he's getting an error. – Barmar Jan 09 '17 at 07:55
True! expected...! – Jai Jan 09 '17 at 07:58
I did include the jquery library. I also tried this: `` doesnt seem to work either. I'll try to see if firebug has something – herondale Jan 09 '17 at 08:07
@herondale as per `jquery 3.x.x` `$(document).ready()` method is i guess removed. Instead use the preferred version as `$(function(){ // code here in this ready block })` – Jai Jan 09 '17 at 08:08

score 1 · Accepted Answer · edited May 23 '17 at 12:16

1

Since 'on' works relative to elements you have to give a exist element to listen event, such as 'body' which always it exist on page .

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

this seems duplicate please look this question $(document).on("click"... not working?

edited May 23 '17 at 12:16

Community

1
1

answered Jan 09 '17 at 07:55

Farhad Azarbarzinniaz

719
4
17

any issue with `$(document)`? – Jai Jan 09 '17 at 07:59
and what/how come is that? – Jai Jan 09 '17 at 08:03
please take a look at this question http://stackoverflow.com/questions/17605296/document-onclick-not-working – Farhad Azarbarzinniaz Jan 09 '17 at 08:08

score 0 · Answer 3 · answered Jan 09 '17 at 07:54

0

Your code works fine for me:

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

One issue that may be causing your problem is that the closing </td> tags are incorrect and should be </th>. If the browser is correcting the opening tags to <td> then your event will not fire.

answered Jan 09 '17 at 07:54

Seb Cooper

564
2
13

Thank you for pointing that out, i didn't see that. I have corrected it but I'm still not getting the alert – herondale Jan 09 '17 at 08:10
Can you update your question with a working example of your code in a code snippet? – Seb Cooper Jan 09 '17 at 08:15
it's connected to the database, so it will surely throw errors. will that be okay? – herondale Jan 09 '17 at 08:33
Thanks, please replace the PHP code in your snippet with the HTML that this outputs on your local machine so that it can actually be tested. – Seb Cooper Jan 09 '17 at 09:14

.on() event handler not firing?

3 Answers3

Additional