0

我正在尝试为多个文本框制作自动建议搜索框的基础知识。我已经有一个脚本来添加/删除文本框，它工作正常。但是我遇到的问题是能够获取页面上的所有文本框，当一个键被按下（基本上是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" />
4

2 回答 2

1

尝试使用on而不是click

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

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

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

看到这个工作小提琴

于 2012-09-16T19:28:43.770 回答
1

发生这种情况是因为在生成文本框之前调用了 keyup 的绑定函数。因此，每次创建新文本框时都运行绑定代码（如下）。

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

或者更好的方法是使用纯 JavaScript onkeyup 属性来调用您定义的函数。例如

$('#buttondiv').append('<div><label>Textbox #'+$counter+'</label><input type="text" name="textbox[]" class="textbox" onkeyup="function_abc(this);" value="" id="country"/></div>');
于 2012-09-16T19:37:25.033 回答