將事件綁定到動態創建的元素

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文檔，綁定和事件到動態元素的正確方法，但是不起作用

有任何想法嗎？

Answer 1

您應該將change事件綁定到<select>元素。 由於<select>不是動態創建的，只有<option>可以動態創建，因此您無需使用委托。 然后，您需要測試用戶選擇的值。 因此應該是：

$("#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(somethingElse)之前使用$("#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;
...

Answer 2

您需要將change事件綁定到select而不是選項之一：

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

Answer 3

試試看（假設#country是您選擇元素的ID）：

$(document).on('change', '#country', function() {
    // do whatever you wanted to do here
});