jQuery Mobile: event op flipswitch?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>
<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?
Gewijzigd op 27/05/2013 01:27:47 door Willem vp
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<script type="text/javascript">
$('#flipswitch1').on('slidestop', function() {
alert('klik');
$('#textdingetje').html('niet leeg meer');
});
</script>
$('#flipswitch1').on('slidestop', function() {
alert('klik');
$('#textdingetje').html('niet leeg meer');
});
</script>
Toevoeging op 27/05/2013 17:01:26:
Zoals gebruikelijk ligt de oplossing weer eens voor de hand. ;-)
window.document.getElementById('#textdingetje').html('niet leeg meer');