选择更改未运行

时间:2018-08-28 09:10:03

标签: jquery cordova

我正在Cordova中构建一个新应用。我正在为这个“奇怪”的问题而苦苦挣扎。

我有一个选择可以很好地载入HTML

只有在运行它时,更改功能才起作用。

代码在这里:

function loadlocations() {

        $.ajax({
            type       : "POST",
            url        : "https://app.q-r-s.eu/client/get_locations.php",
    crossDomain: true,
            tryCount   : 0,
            retryLimit : 3,
            success    : function(data) {
                var result = $.parseJSON(data);
                // div leegmaken voor we each kunnen doen
                $("#keuzelocatie").empty();
                console.log("locatiesladen"); 
                // eerst kijken of JSON leeg is (let op het ! )
                if (!$.isEmptyObject(result)) {
                            var select = '<h3><label for="location">Kies uw locatie:</label></h3>'
                                +'<select name="location" id="location" class="form-control" required>'
                                +'<option value="" disabled selected>Maak uw keuze</option>';
                    $.each(result, function(cat, inhoud) {
                            select += '<option data-cat="'+ cat +'" data-vest="'+ inhoud.id +'">'+ inhoud.name +' ('+ inhoud.city +')</option>';
                    });
                            select += '</select>';
                            $("#keuzelocatie").append(select);
                } else {
                    $("#keuzelocatie").append('Geen locaties met QRS gevonden');
                }

            },
            error      : function(xhr, textStatus, errorThrown){
                if (textStatus === 'timeout') {
                    this.tryCount++;
                    if (this.tryCount <= this.retryLimit) {
                        //try again
                        $.ajax(this);
                        return;
                    }            
                    return;
                }              
            }
        });
    }    

    $(document).ready(function(){

        $("#actionbusy").hide();
        loadlocations();
        $("#table").hide();

        $("#location").change(function()
        {
            console.log("locationchange");
        });


    });

甚至没有显示console.log。

我正在寻找它好几天,但是找不到问题。 这是用于cordova应用程序。

1 个答案:

答案 0 :(得分:0)

您正在尝试将事件附加到不存在的元素。 您可以将其设置为$(document).on('change', '#location', function()而不是$("#location").change(function(),它将事件也附加到新创建的元素上, 或者,创建元素,然后附加一个事件,如下所示:

function loadlocations() {

        $.ajax({
            type       : "POST",
            url        : "https://app.q-r-s.eu/client/get_locations.php",
    crossDomain: true,
            tryCount   : 0,
            retryLimit : 3,
            success    : function(data) {
                var result = $.parseJSON(data);
                // div leegmaken voor we each kunnen doen
                $("#keuzelocatie").empty();
                console.log("locatiesladen"); 
                // eerst kijken of JSON leeg is (let op het ! )
                if (!$.isEmptyObject(result)) {
                            var select = '<h3><label for="location">Kies uw locatie:</label></h3>'
                                +'<select name="location" id="location" class="form-control" required>'
                                +'<option value="" disabled selected>Maak uw keuze</option>';
                    $.each(result, function(cat, inhoud) {
                            select += '<option data-cat="'+ cat +'" data-vest="'+ inhoud.id +'">'+ inhoud.name +' ('+ inhoud.city +')</option>';
                    });
                            select += '</select>';
                            $("#keuzelocatie").append(select);
                            $("#location").change(function()
                            {
                                console.log("locationchange");
                            });

                } else {
                    $("#keuzelocatie").append('Geen locaties met QRS gevonden');
                }

            },
            error      : function(xhr, textStatus, errorThrown){
                if (textStatus === 'timeout') {
                    this.tryCount++;
                    if (this.tryCount <= this.retryLimit) {
                        //try again
                        $.ajax(this);
                        return;
                    }            
                    return;
                }              
            }
        });
    }    

    $(document).ready(function(){

        $("#actionbusy").hide();
        loadlocations();
        $("#table").hide();
    });