javascript - 动态添加文本框不起作用

Question

这很令人沮丧。直到上周，我的代码都运行良好。当用户更改 [使用 change()] 下拉选择中的值时，我将多个文本框添加到我的 HTML 页面。

这是 HTML 代码片段:

<div id="files" class="control-group">
    <label class="control-label">No. of files</label>
    <div class="controls" >
        <select id="files" name="files" class="span3">
            <option value="">--Select Option--</option>
            <?php for($i=1;$i<21;$i++){ ?>
                <option value="<?php echo $i ?>"><?php echo $i ?></option> <?php } ?>
        </select>
    </div>
</div>
<div class="control-group" id="titles">
    <label class="control-label">File Titles</label>
    <div class="controls" id="titleAdd"></div>
</div>

这是我的 Javascript/jQuery:

$(document).ready(function(){
        $("#titles").hide();
    });
    var container;
    // Add & Remove textboxes 
    $("#files").change(function(){

        //Remove all textboxes
        $("#titles").show();
        $(container).empty(); 
        $(container).remove();  
        //"DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS.
        container = $('<div>', {class: 'controls'});
        var option = $("#files").val();
        for(i=1;i<=option;i++)
        {
            // Add a TextBox
            $(container).append('<input style="display: block;" type=text name="Description[]" class="span3 input-left-top-margins" id="Description' + i +'"' + 'placeholder="File ' + i + ' Title" />');
        }
        $('#titleAdd').after(container);   // ADD THE DIV ELEMENT IN THE RIGHT PLACE.
    });

最让人恼火的是这段代码几天前还运行良好。

Answer 1

有两个id #files。

请在此处查看工作示例:https://jsfiddle.net/1c3b63f4/ - jQuery 将始终在此赋值中返回一个空字符串:$("#files").val();。