jQuery触发change事件无效。

Question

我遇到了JavaScript代码的问题，我想在页面加载时触发一个change事件，在本地运行时可以正常工作，但现在在线上却没有任何反应。

以下是我的代码： （其中包含一些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();
});

我希望有人能够指出我犯了哪些错误（或多个错误）。谢谢！

- stowka

---

你所有的事件处理程序都在DOM准备好的处理程序之外，如果这包含在头部部分中可能会有问题。 - adeneo

我的所有JS代码都在body标签的末尾，我可以尝试将所有内容放在$(document).ready函数中。 - stowka

这回答解决了你的问题吗？jQuery .trigger("change") 不起作用 - Heretic Monkey

Answer 1

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

你需要把变化事件放进$(document).ready()的回调函数里，在你触发它们之前的任何地方。

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

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

- emrhzc

---

妈的，你这个家伙拯救了我的理智！ - Rozen

Answer 2

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

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

我给您举个例子：

function countryChange () {
  ...
}

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

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

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

- user3417400

---

谢谢，我会尝试这个。 - stowka

它运行了！非常感谢。不过我仍然在想为什么触发器没有起作用... - stowka

Answer 3

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

- Alireza Ahmadi Rad

Answer 4

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

- user583576

---

OP已经有一个针对“change”的事件监听器。问题是为什么以编程方式触发更改会失败。 - showdev

我已经有一个console.log()了。 在页面加载后，我使用chrome控制台手动触发事件，但似乎函数为空，什么也没有发生。但是当我真正改变所选项目时，它可以完美地工作。 - stowka