Question

我添加了用于列出用户所选语言和排名的代码。在页面底部列出了另一个下拉列表，用于选择新语言“添加语言”。所有数据都正确获取和列出。我的目的是当用户从底部“添加语言”中选择一种语言时，我需要生成行并将每行数据从行保存到表中。现在问题是当我从底部下拉列表中选择语言时添加更多不起作用。请检查我的代码并纠正我。

JS

//fake data for this test
var response = {
    availableLanguage: [{
        id: "1",
        language_id: "English",
        title_en: "USEnglish"
    }, {
        id: "2",
        title_en: "Hindi"
    }, {
        id: "3",
        title_en: "Arabi"
    }

    ]
}


var responseDB = {
    selectLanguageRankingTagId: [{
        id: "1",
        user_id: "11",
        language_id: "English",
        ranking: "2",
        title_en: "English"
    }, {
        id: "2",
        user_id: "11",
        language_id: "German",
        ranking: "3",
        title_en: "German"
    }, {
        id: "3",
        user_id: "11",
        language_id: "French",
        ranking: "4",
        title_en: "French"
    }

    ]
}


var $languagemodal = $('#languagemodal'); // get the modal and the dialog div
var $dialog = $languagemodal.find('.modal-dialog');

//$languagemodal.modal({show: true}); // just to show the modal for the demo

// get languages
//$.get("/tag/language", function(response){
        var optionLang = '';
        for (var i = 0; i < response.availableLanguage.length; i++) {
            engLangID  = response.availableLanguage[i].id;
            engLang    = response.availableLanguage[i].title_en;
            optionLang += '<option value="'+engLangID+'" class="addMore" data-language="'+engLang+'">'+engLang+'</option>';
        }

// load the modal content div
$dialog.html('<div class="modal-content"><div class="modal-header "><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">Edit Languages</h4></div><div class="modal-body"><div class="appendRow"></div></div><div class="modal-footer"><div class="row"><select class="form-control input-sm"><option selected="selected">Add Language</option>' + optionLang + '</select></div><br><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div>');

// get the modal body we just added
var $modalBody = $dialog.find('.modal-body');

// loop over your data, you would have this in your $.get function 
$.each(responseDB.selectLanguageRankingTagId, function (i, item) {
    // make the row
    var $newRow = $('<div class="row"><div class="col-md-8"><h4 style="background-color: lightgrey; border-radius: 10px; background-repeat: repeat; height: 30px; margin:5px 0px; padding:4px 5px;">' + item.title_en + '</h4></div><div class="col-md-3" style="padding:5px;"><select class="form-control input-sm" id="' + item.id + '" data-item="' + item + '"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div></div>')
    // set the select value
    $newRow.find('select').val(item.ranking);
    // add the row to the modal body
    $modalBody.append($newRow);

});

$( ".addMore" ).click(function(){
            fieldCount++;
            language       = $( this ).data('language');
            languageID     = $( this ).val();
            $( ".appendRow" ).append('<div class="row"><div class="col-md-8"><h4 style="background-color: lightgrey; border-radius: 10px; background-repeat: repeat; height: 30px; margin:5px 0px; padding:4px 5px;">'+language+'</h4></div><div class="col-md-3" style="padding:5px;"><select class="form-control input-sm"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div></div>');
        });    

 //});// get languages end

HTML

<div id="languagemodal">
  <div class="modal-dialog" style="margin: 54px 0px;"></div>
</div>

See Demo

Answer 1

您需要使用委托方式来执行此操作，因为您正在动态添加元素，因此直接在动态加载的元素上附加事件将无效。

$("nearest-already-existing-element-reference").on(event, "dynamically-added-element-reference", function(){
    // your code
});

提供select .addMore类代替选项，并在change上使用select事件而不是click事件option 1}}。

然后您可以找到所选的选项： -

$(".modal-dialog").on('change', ".addMore", function(){
    var selected = $( this ).find(':selected');
    language       = selected.data('language');
    languageID     = selected.val();
    $( ".appendRow" ).append(...);
});

Fiddle

点击下拉列表在jquery中生成一行不起作用

1 个答案: