javascript - 将事件绑定(bind)到动态创建的元素

Question

我正在动态创建元素，但在将事件附加到该元素时遇到问题。

代码如下:

$selectUnitedStates = '<option value="americanEnglish" id="americanEnglish">English</option>';

$selectUnitedKingdom = '<option value="englishEnglish" id="englishEnglish">English</option>';

$selectGermany = '<option value="german" id="german">German</option>';

$selectFrance = '<option value="frenchFrench" id="frenchFrench">French</option>';

$selectItaly = '<option value="italian" id="italian">Italian</option>';

$selectCanada = '<option value="canadianEnglish" id="canadianEnglish">English</option>' +
        '<option value="canadianFrench" id="canadianFrench">French</option>';

$selectDenmark = '<option value="danish" id="danish">Danish</option>';

$selectFinland = '<option value="finnish" id="finnish">Finnish</option>';

$selectSweden = '<option value="swedish" id="swedish">Swedish</option>';

$('#country').change(function () {
        $.ajax({
            success: function () {
                if ($('#country').val() === 'UnitedStates') {
                    $('#language').html("");
                    $('#language').html($selectUnitedStates);
                }
                if ($('#country').val() === 'UnitedKingdom') {
                    $('#language').html("");
                    $('#language').html($selectUnitedKingdom);
                }
                if ($('#country').val() === 'Germany') {
                    $('#language').html("");
                    $('#language').html($selectGermany);
                }
                if ($('#country').val() === 'France') {
                    $('#language').html("");
                    $('#language').html($selectFrance);
                }
                if ($('#country').val() === 'Italy') {
                    $('#language').html("");
                    $('#language').html($selectItaly);
                }
                if ($('#country').val() === 'Canada') {
                    $('#language').html("");
                    $('#language').html($selectCanada);
                }
                if ($('#country').val() === 'Denmark') {
                    $('#language').html("");
                    $('#language').html($selectDenmark);
                }
                if ($('#country').val() === 'Finland') {
                    $('#language').html("");
                    $('#language').html($selectFinland);
                }
                if ($('#country').val() === 'Sweden') {
                    $('#language').html("");
                    $('#language').html($selectSweden);
                }
            }
        });

(我不确定是否有更好的方法来填充选项)

这是我遇到问题的函数:

$('body').on('change', '#englishEnglish', function () {
        $desiredLanguageEmail = $labelEmailUK;
        $desiredLanguageFirstName = $labelFirstNameUK;
        $desiredLanguageLastName = $labelLastNameUK;
        $desiredLanguageCompany = $labelCompanyUK;
        $desiredLanguageIndustry = $labelIndustryUK;
        $desiredLanguagePhone = $labelPhoneUK;
        $desiredLanguageCountry = $labelCountryUK;
        console.log($desiredLanguageEmail);
    });

根据 jquery 文档，绑定(bind)和事件到动态元素的正确方法，但它不起作用

有什么想法吗？

Answer 1

您应该绑定(bind)change事件至<select>元素。自 <select>不是动态创建的，只有<option> s，您不需要使用委托(delegate)。然后您需要测试用户选择的值。所以应该是:

$("#language").change(function() {
    switch($(this).val()) {
    case "englishEnglish":
        $desiredLanguageEmail = $labelEmailUK;
        $desiredLanguageFirstName = $labelFirstNameUK;
        $desiredLanguageLastName = $labelLastNameUK;
        $desiredLanguageCompany = $labelCompanyUK;
        $desiredLanguageIndustry = $labelIndustryUK;
        $desiredLanguagePhone = $labelPhoneUK;
        $desiredLanguageCountry = $labelCountryUK;
        console.log($desiredLanguageEmail);
        break;
    case "americanEnglish":
        $desiredLanguageEmail = $labelEmailUS;
        $desiredLanguageFirstName = $labelFirstNameUS;
        $desiredLanguageLastName = $labelLastNameUS;
        $desiredLanguageCompany = $labelCompanyUS;
        $desiredLanguageIndustry = $labelIndustryUS;
        $desiredLanguagePhone = $labelPhoneUS;
        $desiredLanguageCountry = $labelCountryUS;
        console.log($desiredLanguageEmail);
        break;
    ...
}

仅供引用，无需使用$("#language").html("")之前$("#language").html(somethingElse) ，因为第二个语句替换了之前的任何内容。

此外，不是有 7 个不同的变量，而是一个巨大的 switch声明为每种语言设置不同的它们，最好创建一个收集它们的对象，关闭语言:

var langLabels = {
    "englishEnglish": {
        email: "Email",
        firstName: "First Name",
        lastName: "Surname",
        company: "Company",
        industry: "Industry",
        phone: "Phone #",
        country: "Country"
    },
    "frenchfrench": {
        email: "Email",
        firstName: "Prénom",
        lastName: "Nom de Famille",
        company: "Compagnie",
        industry: "Industrie",
        phone: "Téléphone",
        country: "Pays"
    },
    ...
}

然后你的.change处理程序可以这样做:

var $desiredLanguage = $langLabels[$(this).val()];
$desiredLanguageEmail = $desiredLanguage.email;
$desiredLanguageFirstName = $desiredLanguage.firstName;
...