Why does new jQuery on('change') not fire on iOS, while it works on Android?

Question

I'm trying to update a piece of code to the new jQuery on() method. I have a table and a select box. I want to populate the select box with one option for each table header cell, which works fine.

Then I want to toggle header cells depending on options selected. This works on desktop and Android but not on iPad.

This is what I'm doing:

$('table th').each(function(i) {

  // add option to select box for each table column
  var toggle = $('<option value="'+id+'">'+th.text()+'</option>');
  $('select#toggle').append(toggle); }      

  // set up options
  $('select#toggle').one("updateCheck", function(){     
     console.log("th-setup");       
     // if condition, then select, otherwise don't select
     }).trigger("updateCheck");

  });


  // listen for select changes
  $('select#toggle').on('change', function() {  
     console.log("change detected");
     })

HTML

<select id="toggle"></select>

<table class="sample">
  <thead>
    <tr>
     <th>one</th>
     <th>two</th>
     <th>three</th>
     <th>four</th>
   </tr>
  </thead>
</table>    

I first tried to bind the following code to document like so:

 $(document).on('change',$('select#toggle'), function(...)

but this simply crashes my iPad before the page is displayed.

Can someone tell me if I'm doing something wrong and why selecting an option does not trigger a change event on iPad vs triggering one on Android and desktop?

Answer 1

It should be:

$('body').on('change', '#toggle', function() { ... });

The first argument is the list of event names. The second is a selector string (not a jQuery object). The third is the handler function.

There's no need to qualify an identifier reference in a selector with the node type.