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

使用一些引导css通过javascript动态创建一个基本输入文本框和一个按钮。按下按钮时，我需要检索文本框的值。但它是空的（不是未定义的）

doSearch函数是我需要提取值的地方

以下是JSFIDLE：

代码如下：

(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();
        });

（函数（$）{
函数doSearch（）{
警报（$（'#name'）.val（）；//这是空的吗？
}
$（document.body）.on（'click'，'go'，函数（）{
警报（“正在搜索”）；
doSearch（）；
});
$.fn.searchName=函数（）{
var调用者=$（这个）；
var输出=“”；
输出+=''；
输出+=‘名称’；
输出+=''；
输出+=''；
输出+=''；
输出+=''；
输出+=‘搜索’；
输出+=''；
输出+=''；
输出+=''；
$（调用者）.html（输出）；
归还这个；
}
}（jQuery））；
$（文档）.ready（函数（）{
$（'#searchName'）。searchName（）；
});

id必须在

输入中，而不是
span
中

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

output+='Name'；
输出+='您想要完成什么？你的小提琴没什么用。。。