触发事件时PreLoader不工作

Question

我在jQueryMobile(jQM 1.2.1)和PhoneGap(cordova-2.7.0)中工作。在Page2的Pagebeforeload事件中，我们收集结果并将其传递给一个数组以便在HTML.Then中获取。第2页显示我们需要隐藏预加载器。

首先，我们使用jQM默认预加载器进行检查。但是当它失败的时候。所以我手动创建了一个预加载器，并在按钮单击时调用它。

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

这里我展示了我的Button Click事件的代码。

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

尝试调用此脚本...

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

而不是showLoading()函数。

演示在这里。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
        }
    });
});