2016-12-21 2 views
0

이제 이미지를 선택할 수있는 응용 프로그램이 있습니다. 이러한 이미지 중 하나를 선택하고 "저장"하고 같은 메뉴로 돌아 가면 더 이상 선택을 취소하거나 선택할 수 없습니다. 그러나 이유를 모르겠으므로 list-item을 클릭하고 이미지를 선택하고 이미지 체크 박스로 돌아 가기보다는 단추를 클릭하십시오.체크 박스로 이미지

여기에서 더 이상 이미지를 선택할 수 없으므로 여기에서 FIDDLE을 다시 작성하십시오.

$(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'); 
}); 
+2

@ $ (document) .on ("pagecreate", "#transport", function() {...' – deblocker

+0

왜 @deblocker가 사용됩니까 ?? – Sreinieren

+0

deblocker 님이 당신의 질문에 답변했습니다. – Omar

답변

1

페이지가 표시 될 때 당신은 또 다시 클릭 처리기를 할당됩니다

여기에 내가 쓴 자바 스크립트 기능입니다.

페이지가 두 번째로 표시되면 클래스가 두 번 토글됩니다 (클릭 이벤트에 console.log()을 추가하면이 동작을 볼 수 있음).

빠른 해결 방법은 할당하기 전에 클릭 핸들러를 제거하는 것입니다.

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

업데이트 바이올린 :

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

+0

선택자가 항상 해당 함수를 호출하기 때문에 그 이유는 무엇입니까? – Sreinieren

+1

사실,''pageshow''는 페이지가 나타날 때마다 실행됩니다. –

+0

'페이지 탐색'을 '페이지 탐색'으로 변경하면 정답입니다. – Omar

0

$(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>

0

이것은 당신의 자바 스크립트에 약간의 변화에게 있습니다

$.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'); 

작동중인 바이올렛은 여기에 http://jsfiddle.net/nileshyadav987/3wpotv2n/18/

+0

귀하의 피들에서 귀하의 답변으로 변경된 사항이 없습니다 – Sreinieren

+0

fiddle url을 (를) 지금 확인하십시오. –