Hi,
I have been working with the Toggle Check button without and issue until I place it in the menu bar on the index.html.
Now I cannot trigger using $(’#night_mode_toggle’).on(‘toggle:change’, function ()
HTML
<div class="statusbar"></div>
<div class="panel panel-left panel-cover">
<div class="page">
<div class="page-content">
<div class="block-title"></div>
<div class="block">
<img src="img/person.png" alt="">
<p id="welcome_profile_name">Welcome David!</p>
</div>
<div class="block-title">My Menu</div>
<div class="list links-list">
<ul>
</ul>
</div>
<div class="list simple-list no-hairlines-md">
<ul>
<li>
<span>Night Mode</span>
<label class="toggle toggle-init" id="night_mode_toggle">
<input type="checkbox" id="night_mode_toggle_box" checked>
<span class="toggle-icon"></span>
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="view view-main"></div>
SCRIPT
$(document).on('page:mounted', function (e) {
night_mode = localStorage.getItem('night_mode');
if (night_mode == "on")
{
console.log("on==");
$('#night_mode_toggle_box').prop('checked',false);
}
else
{
console.log("off==");
$('#night_mode_toggle_box').prop('checked',true);
}
$('#night_mode_toggle').on('toggle:change', function () {
//console.log($('#status_toggle').prop('checked'));
if ($('#night_mode_toggle_box').prop('checked') == true)
{
localStorage.setItem('night_mode', "on");
document.body.classList.add("theme-dark");
console.log("on");
}
else
{
localStorage.setItem('night_mode', "off");
document.body.classList.remove("theme-dark");
console.log("off");
}
});
})
Any pointers? Thanks.