javascript - 如何获取动态创建的选择框的值

Question

我正在使用 ajax 动态创建一个 div。现在，如果 ajax 调用成功，那么我为 div 元素创建了一个字符串并将其附加到原始 div id。 这是我的代码

 $.ajax({
    type:"GET",
    url:"resources/json/asnData.json",
    dataType:"json",
    success:function(data){
        $.each(data.Payload, function(index, val){
            i=i+1;
            stmt+='<div class="row">'+
                    '<section class="col col-2">'+
                        '<label class="input"><i class="icon-append fa fa-key"></i>'+
                            '<input type="text" name="keyName" value="'+val.key+'" readonly/>'+
                        '</label>'+
                    '</section>'+
                    '<section class="col col-3">'+
                        '<label class="select">'+
                            '<select id="dataConversionType'+i+'" class="dataConversionType">'+
                                '<option value="HEX">HEX</option>'+
                                '<option value="ALL">Compare All</option>'+
                                '<option value="ASCII">ASCII</option>'+
                                '<option value="STRING">STRING</option>'+
                                '<option value="INT">INTEGER</option>'+
                                '<option value="BINT">BIG INTEGER</option>'+
                            '</select><i></i>'+
                        '</label>'+
                    '</section>'+
                    '<section class="col col-5">'+
                        '<label class="input"><i class="icon-append fa fa-dashcube "></i>'+
                            '<input id="convertedType'+i+'" type="text" value="'+val.value+'" readonly/>'+
                        '</label>'+
                    '</section>'+
         '</div>';
        });
        $(".dataParser").append(stmt);

现在有一个功能，如果有人在选择框中选择一个值然后触发并显示。

 $('#dataConversionType'+i).change(function(e) {
            e.preventDefault();
            var conversionType=$(this).val(); //I have doubt here also..
            console.log(conversionType);
            if(conversionType == 'ALL') {
                console.log('ALL-Show a modal with each possible conversion');
            }

但这行不通。如果我使用类名调用，则此函数有效。但是我必须使用带有 i 值的 id 来调用该函数，以便使用该 i 值我还可以在其他字段中设置一些值。 任何帮助将不胜感激......

Answer 1

使用 class 而不是 id(用一些非动态容器替换文档)

 $(document).on('change','.dataConversionType',function(e) {
                e.preventDefault();
                var conversionType=$(this).val(); 
                console.log(conversionType);
                var index_val = $(this).attr('data-index')
                if(conversionType == 'ALL') {
                    console.log('ALL-Show a modal with each possible conversion');
                }
    )};

当你生成你的元素时添加一个数据属性

'<select id="dataConversionType'+i+'" class="dataConversionType" data-index="'+i+'">'

另外，如果你在一个循环中，如果你想获得正确的值而不是最新的值，你需要将你的 ajax 包装在一个闭包中。

(function(idx) {
  //ajax stuff here
}(i)