jQuery Mobile: event op flipswitch?

Door Willem vp op 27-05-2013 01:23 gewijzigd op 27-05-2013 01:27

1.712 views

In jQuery Mobile probeer ik de inhoud van een span-element te wijzigen als een flipswitch wordt omgezet:


<div id="page1" data-role="page">
   <div data-role="content">
      <div id="aanuitdingetje" data-role="fieldcontain">
         <select name="flipswitch1" id="flipswitch1" data-theme="" data-role="slider">
             <option value="off">Uit</option>
             <option value="on">Aan</option>
         </select>
         <span id="textdingetje">(leeg)</span>
      </div>
   </div>
</div>
<script type="text/javascript">
   $('#flipswitch1').on('slidestop', function() {
      alert('klik');
      $('#textdingetje').innerHTML='niet leeg meer';
   });
</script>

Wanneer ik op de switch klik, wordt de callback netjes aangeroepen, want ik krijg een alertbox met de tekst "klik". De inhoud van het span-element wordt echter niet gewijzigd.

Als ik $('#textdingetje') vervang door document.getElementById('#textdingetje') krijg ik in de javascript console de melding "Uncaught TypeError: Cannot set property 'innerHTML' of null". Om de een of andere reden wordt het span-element (of misschien zelfs het hele document-object) dus niet gezien vanuit de callback.

Een soortgelijke constructie in 'plain old Javascript' werkt wel; blijkbaar doet jQM dus iets met event callbacks wat ik niet verwacht. ;-)

Wat zie ik hier over het hoofd?

L Lord Gaga

27-05-2013 08:52

Probeer dit eens?


<script type="text/javascript">
   $('#flipswitch1').on('slidestop', function() {
      alert('klik');
      $('#textdingetje').html('niet leeg meer');
   });
</script>

Willem vp

27-05-2013 10:50

Geen verschil. En aangezien alert(document.getElementById('#textdingetje')) als resultaat 'null' geeft, verwacht ik eigenlijk dat geen enkele method zal werken. $ geeft weliswaar een object terug, maar dat is volgens mij een leeg object, want elke property die ik opvraag is undefined.

[size=xsmall]Toevoeging op 27/05/2013 17:01:26:[/size]

Zoals gebruikelijk ligt de oplossing weer eens voor de hand. ;-)

window.document.getElementById('#textdingetje').html('niet leeg meer');

Reageren

Inloggen om te reageren