将事件绑定到动态创建的元素

Question

I'm creating elements dynamically but I'm having problems to attache events to this elements.

Here's the code:

$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);
                }
            }
        });

(I'm not sure if there's a better way to do populate the options)

and here's the function that I'm having problems with:

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

According to jquery documentation that the correct way to bind and event to a dynamic element, but it's not working

Any ideas?

Answer 1

You should be binding the change event to the <select> element. Since the <select> is not created dynamically, only the <option> s, you don't need to use delegation. Then you need to test the value that the user selected. So it should be:

$("#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;
    ...
}

FYI, there's no need to use $("#language").html("") before $("#language").html(somethingElse) , since the second statement replaces whatever was there before.

Also, instead of having 7 different variables, and an enormous switch statement to set them all differently for each language, it would probably be better to create an object that collected them, keyed off the language:

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"
    },
    ...
}

Then your .change handler can just do:

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

Answer 2

You need to bind the change event to the select instead of one of the options:

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

Answer 3

try this (assuming #country is the id of your select element):

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