switch seems to be completely ignoring / not firing onchange events

[Trian Karayiannis]

I am trying to implement a switch that shows/hides some elements depending on its state.

So, as you normally would expect, I coded something like

<li class="comp">
  <div><h3>Label</h3></div>
  <aside>
    <span class="switch">
      <input id="cb1" type="checkbox" name="some" onchange="alert('changed!');$('#whatever').toggle( $(this).prop('checked') )" />
    </span>
  <aside>
</li>

No event fired. Tried changing onchange to onclick to no avail.

Then I removed the onchange declaration from in there and placed it in some initialisation script, like:

$('#cb1').on('change', function() { ... });
$('#cb1').on('click' , function() { ... });

Again, no luck here. The switch ui seems to be updating the element's DOM, but not events are being fired thereafter.

This, at the very least is very counter-intuitive in an otherwise very intuitive framework to program with.

Now, I've tested this in at least 6 browsers and the behaviour is the same:

Mac / Safari

Mac / Chrome

Mac / Firefox

iPhone / Safari

iPhone / Chrome

Android / Chrome

Android / (native browser on 4.4.2)

Android / (native browser on 4.0.4)

After extensive googling, the only way to catch this reliably is with the following method:

$('[name="some"]').bind("DOMSubtreeModified", function(event) { ... });

But, guys, please... this is no way, to go from London to Paris via Beijing. For a commercial product, this is not excusable.

Trian

[Robert Biggs]

What you're trying to do with the inline code is what already happens automatically if you create a switch. Tapping it on or off automatically sets the checked state of the checkbox input for you. You do not ever need to do that through code. Besides that, you can determine the checked state of a switch by querying if it has the class "on" or not. If "on", it's selected, otherwise not:

$.body.on('singletap swipeleft swiperight', '.switch', function() {

   if ($(this).hasClass('on') {

      var value = '';

      value = $(_switch).find('input').val();

      $('#response').html(value);

   }

});

--
You received this message because you are subscribed to the Google Groups "ChocolateChip-UI" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chocolatechip-...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.