为什么动态文本框返回空值?

时间:2014-10-27 15:54:08

标签: javascript jquery html twitter-bootstrap

使用一些bootstrap css通过javascript动态创建基本输入文本框和按钮。按下按钮我需要检索文本框的值。但它的出现是空的(未定义)。

doSearch功能是我需要获取值的地方。

这是jsFiddle:http://jsfiddle.net/9u3kb6rk/3

以下是代码:

(function ($) {

            function doSearch() {
                alert($('#name').val());//this is empty?
            }

            $(document.body).on('click', '#go', function () {
                alert('doing search');
                doSearch();
            });

            $.fn.searchName = function () {
                var caller = $(this);
                var output = '';

                output += '<div class="input-group ">';
                output += '<span class="input-group-addon area" id="name" name="name">Name</span>';
                output += '<input type="text" class="form-control" />';
                output += '</div>';

                output += '<div class="input-group">';
                output += '<span class="input-group-btn">';
                output += '<button class="btn btn-primary" type="button" id="go">Search</button>';
                output += '</span>';
                output += '</div>';
                output += '</div>';

                $(caller).html(output);
                return this;
            }
        }(jQuery));

        $(document).ready(function () {
            $('#searchName').searchName();
        });

1 个答案:

答案 0 :(得分:0)

id必须位于input而不是span

output += '<span class="input-group-addon area">Name</span>';
output += '<input type="text" id="name" name="name" class="form-control"

您的code已更新。