javascript - 输入具有唯一 ID 的动态表单

Question

我想动态创建表单输入。而我将其设为静态如下。

html

<input type="text" id="try1" /><br/>
<input type="text" id="try2" style="display: none"/><br/>
<input type="text" id="try3" style="display: none"/>

javascript

$("#try1").live("input", function(){
    a = $(this).val();
    if (a.length >= 3){
        $("#try2").show();
    }
    else if (a.length <=3){
        $("#try2").hide();
    }

});

$("#try2").live("input", function(){
    a = $(this).val();
    if (a.length >= 3){
        $("#try3").show();
    }
    else if (a.length <=3){
        $("#try3").hide();
    }

});

如何输入动态表单，当填充超过 3 个字符时，新的输入表单将出现在下方。请帮帮我 ：）

Answer 1

试试这个代码

<script src="http://code.jquery.com/jquery-latest.js"></script>


<script>

 var counter=2;
$(document).ready(function() {


    $("input").live('keyup', function(){
        var currentID = $(this).attr('id');
        a = $('#'+currentID).val();

        if (a.length >= 3){
            $('<input/>').attr({ type: 'text', id: 'try'+counter, name: 'try'+counter }).appendTo('#appenddiv');
            counter++;

        }
        else if (a.length <=3){
            $('#try'+currentID).remove();

        }
    });



});

</script>
<input type="text" id="try1" /><br/>
<div id= "appenddiv">

</div>