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();

 });

我强烈建议不要在 ready 事件之外绑定你的选择器。

Answer 2

您可以通过在全局命名空间中定义要用作事件处理程序的函数来避免使用$().trigger（如果您担心向全局对象添加属性，则可以在包装函数中）。

通过命名您定义的函数来添加事件处理程序，当您需要触发事件处理程序时，您只需调用该函数。

我给你举个例子：

function countryChange () {
  ...
}

$('#country').on('change', countryChange);

function init() {
  ...
  countryChange(); 
}

$(document).ready(function () {
  init();
}

Answer 3

在我放置 $(selector).trigger("change"); 后我的问题得到了解决在 $(document).ready() 函数中。我的整个文档都是由 JS 创建的。

Answer 4

$( ".target" ).change(function() {
    alert( "Handler for .change() called." );
});