js生成元素的事件不执行问题

要求：双击span标签，可以修改。
<div class="commands_ticketmiddl_ine_new" >
    <span>NO:</span><span  name="oddNo"  id="customerNo">${worKticket.customerNo}</span>
</div>

方案：添加onclick事件，动态增加input。

document.getElementById("customerNo").ondblclick = function(){
//                alert(11111);
                var td = $(this);
                var txt = $.trim(td.text());
                var input = $("<input name='customerNo' onblur='test()' id='testID' type='text'value='" + txt + "'/>");
                td.html(input);
 
            }
进一步要求，当鼠标输入框离开时候，弹出所填写的内容，在上边动态生成的时候写上onblur方法。
如果，$(function(){
　　　如果在这个里边，获取

$("#testID").val()；有问题，这里边涉及元素加载的问题。当双击的时候才生成此元素，但是，加载页面的时候，需要这个元素。所以报错。

});

function test(){
    alert(123);
    alert($("#testID").val());
}