javascript - jQuery 触发更改事件不起作用

Question

我的 JavaScript 代码有问题，我想在加载页面时触发更改事件，它曾经在本地工作，但现在在线，没有任何反应。

这是我的代码: (有一些php代码，它工作正常)

$("#city").change(function() {
    console.log("city changed...");
    var city = $( "#city option:selected" ).val();
    $.get(
        "ajax.php",
        {
            page: "venues",
            city: city
        },
        function (data) {
            $("#venue").empty();
            $("#venue").append('<option selected disabled>--</option>');
            for(var i = 0; i < data.venues.length; i+=1) {
                if (data.venues[i].id == <?php print $concert->getVenue()->getId(); ?>) {
                    $("#venue").append('<option value="'+data.venues[i].id+'" selected>'+data.venues[i].name+'</option>');
                } else {
                    $("#venue").append('<option value="'+data.venues[i].id+'">'+data.venues[i].name+'</option>');
                }
            }
            $("#label-venue").visible();
            $("#venue").visible();

            /*if (controlForm())
                $("#submit").removeProp("disabled");
            else
                $("#submit").addProp("disabled");*/
        }
    );
});

$("#country").change(function() {
    console.log("country changed...");
    var country = $( "#country option:selected" ).val();
    $("#country-city").html($( "#country option:selected" ).html());
    $.get(
        "ajax.php",
        {
            page: "cities",
            country: country
        },
        function (data) {
            $("#city").empty();
            $("#city").append('<option selected disabled>--</option>');
            $("#venue").empty();
            $("#venue").append('<option selected disabled>--</option>');
            for(var i = 0; i < data.cities.length; i+=1) {
                if (data.cities[i].id == <?php print $concert->getVenue()->getCity()->getId(); ?>) {
                    $("#city").append('<option value="'+data.cities[i].id+'" selected>'+data.cities[i].name+'</option>');
                } else {
                    $("#city").append('<option value="'+data.cities[i].id+'">'+data.cities[i].name+'</option>');
                }
            }
            $("#label-city").visible();
            $("#city").visible();
            $("#city").trigger("change");
        }
    );
});

function init() {
    $.get(
        "ajax.php",
        {
            page: "countries"
        },
        function (data) {
            $("#country").empty();
            $("#country").append('<option selected disabled>--</option>');
            for(var i = 0; i < data.countries.length; i+=1) {
                if (data.countries[i].id == <?php print $concert->getVenue()->getCity()->getCountry()->getId(); ?>) {
                    $("#country").append('<option value="'+data.countries[i].id+'" selected>'+data.countries[i].name+'</option>');
                } else {
                    $("#country").append('<option value="'+data.countries[i].id+'">'+data.countries[i].name+'</option>');
                }
            }
            $("#country").trigger("change");
        }
    );
}

$("#country-dismiss").click(function() {
    $("#country-name-en").val("");
    $("#country-name-nl").val("");
    $("#country-name-de").val("");
});

$("#city-dismiss").click(function() {
    $("#city-name-en").val("");
    $("#city-name-nl").val("");
    $("#city-name-de").val("");
});

$("#venue-dismiss").click(function() {
    $("#venue-name").val("");
    $("#venue-texte").val("");
    $("#venue-website").val("");
});

$("#country-submit").click(function() {
    console.log("adding country");
    var name_en = $("#country-name-en").val();
    var name_nl = $("#country-name-nl").val();
    var name_de = $("#country-name-de").val();

    $.post(
        "ajax.php?page=add_country",
        {
            en: name_en,
            nl: name_nl,
            de: name_de
        },
        function (data) {
            init();
            console.log(data);
        }
    );

});

$("#city-submit").click(function() {
    var name_en = $("#city-name-en").val();
    var name_nl = $("#city-name-nl").val();
    var name_de = $("#city-name-de").val();
    var country = $( "#country option:selected" ).val();

    $.post(
        "ajax.php?page=add_city",
        {
            country: country,
            en: name_en,
            nl: name_nl,
            de: name_de
        },
        function (data) {
            $("#country").trigger("change");
        }
    );
});

$("#venue-submit").click(function() {
    var name = $("#venue-name").val();
    var address = $("#venue-address").val();
    var website = $("#venue-website").val();
    var city = $( "#city option:selected" ).val();

    $.post(
        "ajax.php?page=add_venue",
        {
            city: city,
            name: name,
            address: address,
            website: website
        },
        function (data) {
            $("#city").trigger("change");
        }
    );
});

$( document ).ready(function() {
    (function($) {
        $.fn.invisible = function() {
            return this.each(function() {
                $(this).css("visibility", "hidden");
            });
        };
        $.fn.visible = function() {
            return this.each(function() {
                $(this).css("visibility", "visible");
            });
        };
    }(jQuery));
    init();
});

我希望有人能够看到我在哪里犯了一个或多个错误。谢谢!

Answer 1

您必须将更改事件放入 $(document).ready() 的回调函数中，位于触发它们之前的任何位置。

$(document).ready(function() {
  $(selector).change(function() {
    ...
   });
        
  $(selector).trigger("change"); //or $(selector).change();
});

我强烈建议永远不要在就绪事件之外绑定(bind)选择器。