jquery easyui control event listener entrusted to jquery event listener, keyup take the latest value problem

<div id="<?php echo NS; ?>toolbar">
    <div style="padding:5px">
        <form id="<?php echo NS; ?>searchform">
            <Span> Order number: </ span>
            <input class="easyui-textbox" id="sn" name="sn" data-options="iconCls:'icon-ok',prompt:'订单号'" style="width:200px">
            <label>
                <a href="#" class="easyui-linkbutton" data-options="text: '搜索', iconCls:'icon-search'" onclick="<?php echo NS; ?>search()"/>
            </label>
        </form>
    </div>
</div>
<p></p><p></p>
<-! AJAX data to fill html Templates ->
<div id="<?php echo NS;?>dataview_template" style="display:none">
<div style="margin-bottom:5px;font-size:14px;border-bottom:1px solid #ccc">
   order details
  </div> 
  <table cellspacing="12" style="border-color:#3399ff;padding:0;margin:0;width:100%;height:30px;">
   <tbody>
    <tr>
     <Td> Order ID: </ td>
     <td>{{id}} </td>
     <Td> ID: </ td>
     <td>{{sn}} </td>
     <Td> Title Description: </ td>
     <td>{{title}} </td>
    </tr>
    <tr>
     <Td> Order Type: </ td>
     <td>{{_type}} </td>
     <Td> Orders city: </ td>
     <td>{{_cityid}} </td>
     <Td> Total: </ td>
     <td>{{sumprice}} </td>
    </tr>
    <tr>
     <Td> cost: </ td>
     <td>{{cosprice}} </td>
     <Td> pay the price: </ td>
     <td>{{payprice}} </td>
     <Td> Status: </ td>
     <td>{{_status}} </td>
    </tr>
    <tr>
     <Td> pay Time: </ td>
     <td>{{paytime}} </td>
     <Td> Username: </ td>
     <td>{{_memberid}} </td>
     <Td> Name of Organization: </ td>
     <td>{{_corperid}} </td>
    </tr>
    <tr>
     <Td> Order Source: </ td>
     <td>{{_platid}} </td>
     <Td> Added </ td>
     <td>{{_addtime}} </td>
     <Td> contact phone number </ td>
     <td>{{contactmobile}} </td>
    </tr>
   </tbody>
  </table>
</div>

<-! AJAX container filled with data ->
<div id="<?php echo NS;?>dataview" style='margin:0;padding:20px 50px' data-options='novalidate:true'></div>

<script type="text/javascript">
    $(document).ready(function(){
        $('#sn').textbox({
            inputEvents: $.extend({},$.fn.textbox.defaults.inputEvents,{
                keyup:function(event){
                    alert($(this).val());
                 },
                click:function(event){
                    alert($(this).val());
                }
             })
        });
    });
    // JS replace the placeholder
    String.prototype.format = function() {
        if(arguments.length === 0) return this;
        var obj = arguments [0];
        var s = this;
        for(var key in obj) {
            s = s.replace(new RegExp("\\{\\{" + key + "\\}\\}", "g"), obj[key]);
        }
        return s;
    };
    // click on the search button operation
    function <?php echo NS; ?>search() {
        // formatted key-value pairs name: value
        There param = {};
        $.each($("#<?php echo NS; ?>searchform").serializeArray(), function () {
            param[this['name']] = this['value'];
        });
        
        $.ajax({
            type: 'POST',
            url: '/orders/order/ajax_index/'+param.sn,
            dataType: "json",
            beforeSend: function (xhr) {$.messager.progress();},
            success: function (res) {
                $.messager.progress('close');
                if (res.status == 200) {
                    . // $ messager.alert ( 'operation prompt', res.msg, 'info');
                    //console.log(res.data.id);
                    // fill data
                    $("#<?php echo NS; ?>dataview").html($("#<?php echo NS; ?>dataview_template").html().format(res.item));
                    return true;
                }
                $("#<?php echo NS; ?>dataview").html('');
                $ .Messager.alert ( 'operation prompt', res.msg, 'error');
            }
        });
    }
</script>