jquery - div display:none 内の入力の val() を読み取ります

Question

smallipopで作成されたツールチップを使用して、小さな Web サイトをセットアップしました。このツールチップ内に入力を入れたので、今度は ajax サブミットを実行したいのですが、それは問題ではありません。問題は、入力の正しい値を取得する方法#Numberです。

そのためにjsfiddleをセットアップしました。

HTML:

<h1>WeTest</h1>
<div>


<span class="test" style="position:absolute;top:50px;left:500px;" id="weTrill">
    click me
    <span class="smallipopHint" >
        <div class="weTrillForm">
            # <input type="text" placeholder="type a number." id="Number" name="number" value=""/>
            <div class="weTrillMore"><small>*some text..</small></div>
            <div class="weTrillSubmit"> <button onclick="alert($('#Number').val());">Get</button></div>
        </div>

    </span>

</span>

</div>

Javascript:

$('.test').smallipop({
    preferredPosition: 'bottom',
    theme: 'blue',
    hideOnPopupClick: false,
    triggerOnClick:true,  
    hideDelay:10000,
    invertAnimation: true
});

問題は、値が表示されないことです

$('#Number').val();