이벤트 발생시 PreLoader가 작동하지 않습니다.

Question

오전 jQueryMobile (jQM 1.2.1) 및 PhoneGap (cordova-2.7.0)에서 작업 중입니다. 이제 Preloader에 문제가 있습니다. 여기 Page1의 제출 버튼을 클릭하면 서버에 보내는 API가 있습니다. Pagebforeload of Page2 결과 우리는 결과를 수집하고 HTML로 가져 오기위한 배열로 전달합니다. Page 2 Preloader를 숨겨야합니다. 하지만 문제는 단추를 클릭 할 때로드가 작동하지 않습니다.

먼저 jQM 기본 Preloader로 확인합니다. 그러나 실패 할 때. 그래서 프리 로더를 수동으로 생성하고 버튼 클릭 할 때 호출합니다.

function showLoading() 
{ 
    $("body").append("<div id='overlay'></div> < img src = 'images/loading.gif' id = 'loader_image'/> "); 
} 

여기에는 버튼 클릭 이벤트 코드가 표시됩니다.

$("#submit_booking_step_one").live('click', function(event) { 

    // $.mobile.loading('show'); 
    showLoading(); 
    var Valresult = searchValidation() 
    if (Valresult == true) 
    { 
     var json = 1; 
     var age_driver = $('#age').val(); 
     var car_group = $('#car_group_list').val(); 
     var cmpapi = 'http://www.sampleurl.com/json/get.php?json=' + json + '&age_driver=' + age_driver''; 
       ajaxForCmpList(cmpapi); 
     //showLoading(); 
     $.mobile.changePage("#mobile_page_list_bookacar", {reverse: false, changeHash: true}); 
     event.preventDefault(); 
    } 
}); 

거기에 대한 해결책이 있습니까?

Answer 1

는 ...이 스크립트를 호출 할

대신 showLoading의

$(".ui-loader").show(); 

() 함수를 사용해보십시오. 여기

DEMO ... http://jsfiddle.net/yeyene/CVv2q/1/

또한이 이벤트에 변경 ...

$("#submit_booking_step_one").on('vclick', function(e){ 
    // your scripts 
}); 

JQUERY

$('#submit_bkg').on('vclick', function(e){ 
    $(".ui-loader").show(); // onsubmit, show loading 

    e.preventDefault(); 
    location.hash = "submitted_booking"; // another page 

    $.ajax({ 
     type: 'POST', 
     url: 'get_data_source.php?qtype=new_booking', 
     data: serialized, 
     dataType: "json", 
     success: function(data) { 

      // your scripts for after successful submit 

      $(".ui-loader").hide(); // hide loading back 
     } 
    }); 
});