Image as checkboxes

Question

Now I have an application where you can select images. When I select one of these images and "save" them and go back to the same menu than I can not deselect or select anything anymore. But I don't know why, so when you click the list-item and than select an image and click the button than return to the image-checkboxes.

Now you can not select any image anymore here is a FIDDLE which recreates the problem.

Here is the javascript function i wrote:

$(document).on("pageshow","#transport",function(){

 $.fn.checkedFunction = function(Clicked, Checked){
    $(this).click(function(){
        $(Clicked).toggleClass(Checked);
    });
 }

  $('.checkbox-car').checkedFunction('.checkbox-car','checked-car');
  $('.checkbox-bus').checkedFunction('.checkbox-bus','checked-bus');
  $('.checkbox-train').checkedFunction('.checkbox-train','checked-train');
  $('.checkbox-metro').checkedFunction('.checkbox-metro','checked-metro');
  $('.checkbox-tram').checkedFunction('.checkbox-tram','checked-tram');
  $('.checkbox-boat').checkedFunction('.checkbox-boat','checked-boat');
});

Answer 1

This is little change in your javascript

$.fn.checkedFunction = function(Clicked, Checked){
  $(this).click(function(){
    $(Clicked).toggleClass(Checked);
  });
}
$('.checkbox-car').checkedFunction('.checkbox-car','checked-car');
$('.checkbox-bus').checkedFunction('.checkbox-bus','checked-bus');
$('.checkbox-train').checkedFunction('.checkbox-train','checked-train');
$('.checkbox-metro').checkedFunction('.checkbox-metro','checked-metro');
$('.checkbox-tram').checkedFunction('.checkbox-tram','checked-tram');
$('.checkbox-boat').checkedFunction('.checkbox-boat','checked-boat');

Working fiddle is here http://jsfiddle.net/nileshyadav987/3wpotv2n/18/

Answer 2

$(document).on("pageshow","#transport",function(){

    
   
});


$(document).ready(function(){

    $.fn.checkedFunction = function(Clicked, Checked){
        $(this).click(function(){
            $(Clicked).toggleClass(Checked);
        });
    }


 $('.checkbox-car').checkedFunction('.checkbox-car','checked-car');
    $('.checkbox-bus').checkedFunction('.checkbox-bus','checked-bus');
    $('.checkbox-train').checkedFunction('.checkbox-train','checked-train');
    $('.checkbox-metro').checkedFunction('.checkbox-metro','checked-metro');
    $('.checkbox-tram').checkedFunction('.checkbox-tram','checked-tram');
    $('.checkbox-boat').checkedFunction('.checkbox-boat','checked-boat');
});//document ready

.select {
    float: left;
    margin: 5px 50px 0 0 !important;
}

.checkbox-wrapper {
    margin: 20px;
}

.checkbox-first-row {
    display: inline-block;
    margin-top: 20px;
}

.checkbox-second-row {
    display: inline-block;
    margin-top: 40px;
}
.text-below {
    display: block;
    margin-top: 70px;
    text-align: center;
}

.checkbox-car {
    width: 60px;
    height: 60px;
    background: transparent url('https://www.princessyachts.com/css/images/icons/apple-touch-icon-60x60.png') no-repeat;
    margin-left: 20px;
}

.checked-car {
    background: transparent url('https://ic.tweakimg.net/usericons/106790/Youtube.png') no-repeat;
}

.checkbox-bus {
    width: 60px;
    height: 60px;
    background: transparent url('https://www.princessyachts.com/css/images/icons/apple-touch-icon-60x60.png') no-repeat;
    margin-left: 50px;
    margin-right: 50px;
}

.checked-bus {
    background: transparent url('https://ic.tweakimg.net/usericons/106790/Youtube.png') no-repeat;
}

.checkbox-train {
    width: 60px;
    height: 60px;
    background: transparent url('https://www.princessyachts.com/css/images/icons/apple-touch-icon-60x60.png') no-repeat;
}

.checked-train {
    background: transparent url('https://ic.tweakimg.net/usericons/106790/Youtube.png') no-repeat;
}

.checkbox-metro {
    width: 60px;
    height: 60px;
    background: transparent url('https://www.princessyachts.com/css/images/icons/apple-touch-icon-60x60.png') no-repeat;
    margin-left: 20px;
}

.checked-metro {
    background: transparent url('https://ic.tweakimg.net/usericons/106790/Youtube.png') no-repeat;
}

.checkbox-tram {
    width: 60px;
    height: 60px;
    background: transparent url('https://www.princessyachts.com/css/images/icons/apple-touch-icon-60x60.png') no-repeat;
    margin-left: 50px;
    margin-right: 50px;
}

.checked-tram {
    background: transparent url('https://ic.tweakimg.net/usericons/106790/Youtube.png') no-repeat;
}

.checkbox-boat {
    width: 60px;
    height: 60px;
    background: transparent url('https://www.princessyachts.com/css/images/icons/apple-touch-icon-60x60.png') no-repeat;
}

.checked-boat {
    background: transparent url('https://ic.tweakimg.net/usericons/106790/Youtube.png') no-repeat;
}

.checkbox-btn {    
    text-align: left !important;    
    color: white !important;
    text-shadow: none !important;
}

<!DOCTYPE html>
<html>
    
    <head>
        <title>JQM latest</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
    </head>
    
    <body>
        <!-- Page 1 -->
      <!--   <div data-role="page" id="dashboard" class="background">
          <a href="#settings" class="ui-btn-right settings-icon" data-transition="slide">
            <img src="http://image.flaticon.com/icons/svg/17/17214.svg" alt="">
          </a>
        </div> -->
        
        
        <div data-role="page" id="settings" class="background">
        <div data-role="header" class="header settings-header">
          <h1 class="page-header">Instellingen</h1>
        </div>
       
        <div data-role="main" class="listBlock">
          <ul data-role="listview" class="setting-list">
            <li class="ui-li"><a href="#transport" class="list-menu" data-transition="slide"><img src="http://image.flaticon.com/teams/1-freepik.jpg" alt="route" class="ui-li-icon ui-icon-route ui-corner-none ui-li-thumb">Route naar de luchthaven</a></li>
            
            
    
          </ul>
        </div>
        </div>
        
        <!--ROUTE AIRPORT FORM_BLOCK-->
      <div data-role="page" id="transport" class="background">
    

          <div class="checkbox-wrapper">         
            <div class="checkbox-car checkbox-first-row">
              <span class="text-below">auto/taxi</span>
            </div>
            
            <div class="checkbox-bus checkbox-first-row">
              <span class="text-below">bus</span>
            </div>

            <div class="checkbox-train checkbox-first-row">
              <span class="text-below">trein</span>                 
            </div>

            <div class="checkbox-metro checkbox-second-row">
              <span class="text-below">metro</span>  
            </div>                
            <div class="checkbox-tram checkbox-second-row">
              <span class="text-below">tram</span>  
            </div>                
            <div class="checkbox-boat checkbox-second-row">
              <span class="text-below">boot</span>
            </div>
            
            <a href="#settings" class="checkbox-btn checkbox-btn-save" data-transition="slide"  data-role="button" data-icon="arrow-r" data-iconpos="right">
              Bewaar gegevens
            </a> 
          </div>
      </div>     
        
        
        
        
        
        
        
    </body>

</html>

Answer 3

You are assigning the click handler again and again when the page is shown.

So the second time the page is shown, the class is toggled twice (you can see this behavior when you add a console.log() to the click event).

A quick fix would be to remove the click handler before assigning it.

$.fn.checkedFunction = function(Clicked, Checked) {
  $(this).off('click'); // <- !!!!
  $(this).click(function() {
    $(Clicked).toggleClass(Checked);
  });
}

Updated fiddle:

http://jsfiddle.net/3wpotv2n/15/