[SOLVED] Toggle issue (on change)

Using the suggested code:

var app = new Framework7();
var toggle = app.toggle.create({
  el: '.toggle',
  on: {
    change: function () {
      alert ('Toggle changed')
    }
  }
})	  

The alert is triggered for all of my toggles - struggling to find a way to trigger a separate on change action for each one. No doubt it will be obvious when someone is kind enough to suggest some code, but help appreciated…

Add id attribute to some of toggle, e.g.:

<div class="toggle" id="my-toggle-1">

And then use it like:

$('#my-toggle-1').on('toggle:change', function () {
  console.log('toggle changed');
});

Vlad
many thanks for the response - I must be doing something amiss because I cannot get your code to work (as it is or used to modify my code). A bit more help will be gratefully appreciated…

The code proposed by Vladimir should work.
Where did you added this code ?
It should be after var app = new Framework7 ({ ... })

Erik
thanks for the response - the code I am testing with is exactly as you and Vlad suggested;

app = new Framework7 ({
$(’#my-toggle-1’).on(‘toggle:change’, function () {
msgTest();
});
})

and the toggle code is:

<span>Hard</span>
 <label class="toggle toggle-init color-red"  id="my-toggle-1">
<input type="checkbox" unchecked>
  <span class="toggle-icon"></span>

the toggle toggles but doesn’t not trigger the onchange

thanks

Well not exactly :slight_smile:

because you should add the code after the app = new declaration.
In other words, after Framework7 ({ … }) and not inside.

Erik
thanks again for your patience in helping.
But it still is not working - the toggle toggles but still does not trigger the change.
Obviously I have a fundamental error but it is proving very difficult to track down.
Hopefully you can suggest something to help get it solved?
cheers

Please provide more complete code example of what you have and tried

I think that the <label> is not going to change a lot. Perhaps you should apply the change / toggle class and toggle id to the input element ?

Erik
thanks again!
I put the change/toggle class in a

but, whilst the toggle works, it does not trigger the toggle:change…
I will put up the full code as Vlad requests.

Here is the complete code (so far):

    <body>
	
<script>
		var answer = "";
		testanswer = 22; //************NEED to set this to calculated answer!!
		
		//Following creates and manages the numpad for user answer entry (origianl here: https://jsfiddle.net/XGundam05/cdmej/) 
		$(document).ready(function(){
		    $('#numBox').click(function(){
		        $('#keypad').fadeToggle('fast');
					document.getElementById('numBox').innerHTML = ''; //remove hint
		        event.stopPropagation();
		    });
		    
		    $('.key').click(function(){
		        var numBox = document.getElementById('numBox');
		        if(this.innerHTML == '0'){
		            if (numBox.innerHTML.length > 0)
		                numBox.innerHTML = numBox.innerHTML + this.innerHTML;
		        }
		        else
		            numBox.innerHTML = numBox.innerHTML + this.innerHTML;
		        
		        event.stopPropagation();
		    });
		    
		    $('.btn').click(function(){
		        if(this.innerHTML == 'DEL'){
		            var numBox = document.getElementById('numBox');
		            if(numBox.innerHTML.length > 0){
		                numBox.innerHTML = numBox.innerHTML.substring(0, numBox.innerHTML.length - 1);
		            }
		        }
		        else{
					//user has hit Go! so store answer
		            answer = document.getElementById('numBox').innerHTML;
					
					//user has entered an answer so hide numpad and delete answer entry
					hideNumPad ();
					
					// now see if answer entered is correct
					if (answer == testanswer) {
						msgCorrect();
						}
					else {
						msgWrongAnswer();
					}
						

				}
		        
		        event.stopPropagation();
		    });
		});	
		
</script>


    <!-- Status bar overlay for fullscreen mode-->
    <div class="statusbar"></div>
    <!-- Panels overlay-->
<!--    <div class="panel-overlay"></div>
    <!-- Left panel with reveal effect--*>
    <div class="panel panel-left panel-cover theme-dark">
      <div class="view">
        <div class="page">
          <div class="navbar">
            <div class="navbar-inner">
              <div class="title">Left Panel</div>
            </div>
          </div>
          <div class="page-content">
            <div class="block">Left panel content goes here</div>
          </div>
        </div>
      </div>
    </div>-->
    <!-- Views-->
    <div class="views">
        <!-- Your main view, should have "view-main" class-->
        <div class="view view-main">
            <!-- Top Navbar-->
            <div class="navbar">
                <div class="navbar-inner">
					
		<!--Next div puts the question mark (instructions etc) in the navbar-->	
	                <div class="left">
							<p><a class="panel-open" href="#" data-panel="left" style="color:  white;">&nbsp;&nbsp;&nbsp;<i class="fa fa-question fa-2x"></i></a></p>
						<div class="panel panel-left panel-cover">
						 <div class="block">
							<h3>Information</h3>
								<div class="list accordion-list">
								  <ul>
								    <li class="accordion-item"><a href="#" class="item-content item-link">
								        <div class="item-inner">
								          <div class="item-title">How to play</div>
								        </div></a>
								      <div class="accordion-item-content">
								        <div class="block">
										  
								        </div>
								      </div>
								    </li>
									<li class="accordion-item"><a href="#" class="item-content item-link">
									    <div class="item-inner">
									      <div class="item-title">The commands</div>
									    </div></a>
									  <div class="accordion-item-content">
									    <div class="block">
											<h4>Reset</h4>
												
										</div>
									  </div>
									</li>
								    <li class="accordion-item"><a href="#" class="item-content item-link">
								        <div class="item-inner">
								          <div class="item-title">About</div>
								        </div></a>
								      <div class="accordion-item-content">
								        <div class="block">
								          <p>Version 18.11</p>
								          <p>Copyright &#169; Jeff Maynard, 2018 - all rights reserved</p>
								        </div>
								      </div>
								    </li>
									<li class="accordion-item"><a href="#" class="item-content item-link">
									    <div class="item-inner">
									      <div class="item-title">Contact</div>
									    </div></a>
									  <div class="accordion-item-content">
									    <div class="block">
									      <p>Item 2 content. Lorem ipsum dolor sit amet...</p>
									    </div>
									  </div>
									</li>
								  </ul>
								</div>

							<p><a class="panel-close" href="#">Close</a></p>
	                    </div>
					</div>
				</div>
			
		<!--Next div puts the stopwatch in the navbar-->	
                <div class="center " style="font-size: 34px;"><p id="stopwatch"><span id="min">0</span> : <span id="sec">00</span> : <span id="msec">000</span></p></div>

		<!--Next div puts the gear icon (settings) in the navbar-->	
					<div class="right">
							<p><a class="panel-open" href="#" data-panel="right" style="color:  white;"><i class="fa fa-gear fa-2x"></i></a></p>
						<div class="panel panel-right panel-cover">
					     <div class="block">
						   	<h3>Settings</h3>
					       <!--<p>Options to change the speed of play, complexity of the arithmetic, number of attempts, Hall of Fame entry and more will appear in later versions.</p>-->
						   
					<div class="block-title">Select features</div>
						<div class="list simple-list">
								
								<li>
									<span>Sounds</span>
									     <label class="toggle toggle-init color-pink" id="toggleSounds" onchange="msgTest()">
									       <input type="checkbox" checked>
									       <span class="toggle-icon"></span>
									     </label>
								</li>
									<ul>
										<li>
											Set Play level:
										</li>
										<li>
										<span>Hard</span>
										     <label class="toggle toggle-init color-red"  id="my-toggle-1">
										       <input type="checkbox" unchecked>
										       <span class="toggle-icon"></span>
										     </label>
										</li>
										<li>
										<span>Middling</span>
										     <label class="toggle toggle-init color-blue" onchange="levelMiddling()">
										       <input type="checkbox" checked>
										       <span class="toggle-icon"></span>
										     </label>
										</li>
										<li>
										<span>Easy</span>
										     <label class="toggle toggle-init color-green" onchange="msgTest ()">
										       <input type="checkbox" unchecked>
										       <span class="toggle-icon"></span>
										     </label>
										</li>
									</ul>
											
								</div>						   
					       <p><a class="panel-close" href="#">Close</a></p>
					     </div>
					   </div>
					</div>
					
				</div>
			</div>



<!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
            <div class="pages navbar-through">
                <!-- Page, data-page contains page name-->
                <div data-page="index" class="page">
                    <!-- Scrollable page content-->
             <div class="page-content">
	
<!--			<div class="row">-->
					
	<div class="content-block">

<!--div for target number-->


<div class="row">
	
	<div class="col-10"></div>
	<div class="col-80">
	    <div class="row home">
	        <div class="col-20 " id="targetimage">
				<a href="#" data-popup=".tapgo-popup" class="popup-open"><img class="icon" src="icon-target/target-go.png" /></a>'
	        </div>

<div class="col-80">
				<div class="list no-hairlines-md">
				  <ul>
				    <li class="item-content item-input item-input-with-info">
				      <div class="item-media">
				        <i class="icon demo-list-icon"></i>
				      </div>
				      <div class="item-inner">
				        <!--<div class="item-title item-label">Answer</div>-->
				        <div class="item-input-wrap">
				          <input type="text" id="answerInput" placeholder="Your answer:"> 						  
						  <div id="numericInput" >
						      <div id="numBox">Tap here to enter</div>
						      <table id="keypad" >
						          <tr>
						              <td class="key elevation-1">1</td>   <!--" elevation-1" adds shadow to element-->
						              <td class="key elevation-1">2</td>
						              <td class="key elevation-1">3</td>
						          </tr>
						          <tr>
						              <td class="key elevation-1">4</td>
						              <td class="key elevation-1">5</td>
						              <td class="key elevation-1">6</td>
						          </tr>
						          <tr>
						              <td class="key elevation-1">7</td>
						              <td class="key elevation-1">8</td>
						              <td class="key elevation-1">9</td>
						          </tr>
						          <tr>
						              <td class="btn">DEL</td>
						              <td class="key elevation-1">0</td>
						              <td class="btn" id="answerEntered">Go!</td>
						          </tr>
								  <tr>
								  	<td colspan="3" style="font-style: italic;">Tap Go! when finished</td>
								  </tr>
						      </table>
						      <!--General filler text to show that-->
						  </div>
						  
						  
				          <span class="input-clear-button"></span>
				          <div class="item-input-info"></div>
				        </div>
				      </div>
				    </li>
				  </ul>
				</div>
			</div>
		</div>
	</div>
	
	
	
	
	
	
		<div class="col-10"></div>

					<div class="row">
						<div class="col-20"></div>
							<div class="col-60">
							
                            <div class="row home">
                                <div class="col-20" id="n1">
									<img class="icon" src="icon/blue-1.png" />
                                </div>
                                <div class="col-20 " id="n2">
								        <img class="icon" alt="icon" src="icon/blue-2.png" />
								</div>
                                <div class="col-20 " id="n3">
                                        <img class="icon" alt="icon" src="icon/green-3.png" />
                                </div>
                                <div class="col-20 " id="n4">
                                        <img class="icon" alt="icon" src="icon/blue-11.png" />
                                </div>
                            </div>
							<div class="row home">
                                <div class="col-20 " id="n8">
							            <img class="icon" alt="icon" src="icon/green-12.png" />
							    </div>
                                <div class="col-20 " id="n7">
								        <img class="icon" alt="icon" src="icon/red-10.png" />
								</div>
                                <div class="col-20 " id="n6">
							            <img class="icon" alt="icon" src="icon/blue-7.png" />
							    </div>
                                <div class="col-20 " id="n5">
							            <img class="icon" alt="icon" src="icon/green-13.png" />
							    </div>
							</div>
							<div class="row home">
                                <div class="col-20 " id="n9">
							            <img class="icon" alt="icon" src="icon/red-7.png" />
							    </div>
                                <div class="col-20 " id="n10">
								        <img class="icon" alt="icon" src="icon/blue-10.png" />
								</div>
                                <div class="col-20 " id="n11">
							            <img class="icon" alt="icon" src="icon/red-9.png" />
							    </div>
                                <div class="col-20 " id="n12">
							            <img class="icon" alt="icon" src="icon/blue-15.png" />
							    </div>
							</div>
							<div class="row home">
                                <div class="col-20 " id="n16">
							            <img class="icon" alt="icon" src="icon/green-17.png" />
							    </div>
                                <div class="col-20 " id="n15">
								        <img class="icon" alt="icon" src="icon/green-14.png" />
								</div>
                                <div class="col-20 " id="n14">
							            <img class="icon" alt="icon" src="icon/blue-4.png" />
							    </div>
                                <div class="col-20 " id="n13">
							            <img class="icon" alt="icon" src="icon/red-19.png" />
							    </div>
</div>
						</div>
					<div class="col-20"></div>
				</div>
			</div>
           </div>
           </div>
          </div>
        </div>


<div class="popup number-popup">
  <div class="view">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Explanation</div>
          <div class="right">
            <!-- Link to close popup -->
            <a class="link popup-close">Close</a>
          </div>
        </div>
      </div>
      <div class="page-content" style="margin-left: 25px;">
		<h4>What the different colours mean:</h4>
		
	<div class="col-20"></div>
       <div class="row home">
           <div class="col-20">
	       		<img class="icon" src="icon/blue-1.png" />
		   </div>
			 <div class="col-80" style="text-align: left;">
		   		<p>Numbers with a BLUE background are to be ignored</p>
	   		</div>
       </div>
       <div class="row home">
           <div class="col-20 ">
              <img class="icon" alt="icon" src="icon/green-2.png" />
			</div>
			 <div class="col-80" style="text-align: left;">
			  <p>Numbers with a GREEN background are to be ADDED to the starting number</p>
           </div>
       </div>
       <div class="row home">
           <div class="col-20 ">
               <img class="icon" alt="icon" src="icon/red-3.png" />
			</div>
			 <div class="col-80" style="text-align: left;">
				<p>Numbers with a RED background are to be SUBTRACTED from the starting number</p>
           </div>
       </div>
       
      </div>
    </div>
  </div>
</div>
		
<div class="popup target-popup">
  <div class="view">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Explanation</div>
          <div class="right">
            <!-- Link to close popup -->
            <a class="link popup-close">Close</a>
          </div>
        </div>
      </div>
      <div class="page-content" style="margin-left: 25px;">
		<h4>This is your starting number</h4>
		
       
      </div>
    </div>
  </div>
</div>

<div class="popup tapgo-popup">
  <div class="view">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Explanation</div>
          <div class="right">
            <!-- Link to close popup -->
            <a class="link popup-close">Close</a>
          </div>
        </div>
      </div>
      <div class="page-content" style="margin-left: 25px;">
		<h4>This will be your starting position</h4>
       
      </div>
    </div>
  </div>
</div>

	
	<div class="toolbar toolbar-bottom-md">
	    <div class="toolbar-inner">
	        <p id="bottom-reset" class="toolbarLinks" onclick="ResetRun()";>Reset!</p>
			<p id="bottom-stop" class="toolbarLinks" onclick="StopRun()">Stop!</p> <!--need this to make it work even if we don’t want to see!!!-->
	        <p id="bottom-start" class="toolbarLinks" onclick="StartRun()">Go!</p>
	
		</div>

    <script src="js/jquery.js"></script>
    <script src="js/timer.js"></script>
    <script src="js/jquery.playsound.js"></script> <!--for notifications https://paulkr.github.io/overhang.js/-->
    <script src="js/fontawesome.js"></script>
	
<!--    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>-->
    <!-- Path to Framework7 Library JS-->
    <script type="text/javascript" src="js/framework7.min.js"></script>
    <script type="text/javascript" src="js/my-app.js"></script>


<script>

//$('#levelMidBtn').on('toggle:change', function () {
//  alert('toggle hard changed');
//});
app = new Framework7 ();
$('#my-toggle-1').on('toggle:change', function () {
  alert("ksksk");
//  msgTest();
});
        </script>
	
</body>

thanks…

Try

  <input type="checkbox" unchecked/ id="my-toggle-1">

with

$('#my-toggle-1').on('input:change', function () {
  alert("Hooray");
//  msgTest();
});

instead of

<label class="toggle toggle-init color-red" id="my-toggle-1">
  <input type="checkbox" unchecked/>
  <span class="toggle-icon></span>
</label>

But onchange on input should also work

<input type="checkbox" onchange="msgTest ()">

if msgTest() is in scope.

Erik
really appreciate the continued help but these new suggestions still do not trigger the input:change event (although the onchange is triggered if included).
cheers

Apologises I made a mistake. If you change input:change into change it should work.
I just checked it at this CodePen

Erik
That works!
Again, many thanks for your patience in resolving this for me…