3

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
frequent
  • 27,643
  • 59
  • 181
  • 333

1 Answers1

6

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.

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • ok. thanks. Using $('body') instead of $(document) does not crash my ipad anymore. However the change event does not fire when I select/deselect options – frequent Mar 01 '12 at 09:16
  • I think this is an issue in JQM not Jquery on(), so thanks for the selector and you get the check. – frequent Mar 01 '12 at 10:41
  • OK. I don't have an iOS device handy to try it :-) – Pointy Mar 01 '12 at 13:21
  • 1
    Found a solution, too: http://stackoverflow.com/questions/7680992/change-event-not-firing-on-select-elements-with-mobile-safari-form-assistant – frequent Mar 01 '12 at 13:32