Question

我正在尝试为多个文本框制作自动提示搜索框的基础知识。我已经有一个脚本来添加/ remvoe文本框，这是正常的。但我遇到的问题是能够获取页面上的所有文本框，当按下键时（基本上是onkeyup），它将提示文本框的值。我能够将这个用于我在html中添加自己的文本框，但是任何使用jquery添加的文本框都无法工作。

这是jquery：

    $(document).ready(function(){
    $counter = 0; // initialize 0 for limitting textboxes
    $('#buttonadd').click(function(){
        if ($counter < 10)
        {
            $counter++;
            $('#buttondiv').append('<div><label>Textbox #'+$counter+'</label><input type="text" name="textbox[]" class="textbox" value="" id="country"/></div>');
        }else{
            alert('You cannot add more than 10 textboxes');
        }
    });

    $('#buttonremove').click(function(){
        if ($counter){
            $counter--;
            $('#buttondiv .textbox:last').parent().remove(); // get the last textbox and parent for deleting the whole div
        }else{
            alert('No More textbox to remove');
        }
    });

    $('#buttonget').click(function(){
        alert($('.textbox').serialize()); // use serialize to get the value of textbox
    });

    $('input').bind('keyup', function() {
        alert($(this).val());
    });

    $('#dropdownadd').change(function(){
        $('#dropdowndiv').html(""); // when the dropdown change set the div to empty
        $loopcount = $(this).val(); // get the selected value
        for (var i = 1; i <= $loopcount; i++)
        {
            $('#dropdowndiv').append('<div><label>Textbox #'+i+'</label><input type="text" name="textbox2[]" class="textbox2" value="" /></div>');
        }
    });
});

这是html：

<div id="buttondiv">
<!-- this is where textbox will appear -->
</div>
<div class="choices">
    <span>Adding Textbox using Button</span>
    <input type="button" id="buttonadd" value="Add Textbox"/>
    <input type="button" id="buttonremove" value="Remove Textbox"/>
    <input type="button" id="buttonget" value="Get Textbox" />
</div>

<input id="country" size="25" type="text" />

Answer 1

尝试使用on代替click

http://api.jquery.com/on/

这应该通过委托动态添加元素。我添加了一个div来包装元素，手动和动态添加，然后你可以应用这个

$('#container').on('keyup', 'input', function() {
    alert($(this).val());
});

请参阅此working fiddle

Answer 2

这是因为在生成文本框之前调用了keyup的绑定功能。因此，每次创建新文本框时都要运行绑定代码（下面）。

$('input').bind('keyup', function() {
        alert($(this).val());
    });

或更好的方法是使用纯JavaScript onkeyup属性来调用已定义的函数。 e.g。

$('#buttondiv').append('<div><label>Textbox #'+$counter+'</label><input type="text" name="textbox[]" class="textbox" onkeyup="function_abc(this);" value="" id="country"/></div>');

jquery - 文本框未被读取

2 个答案: