eayui动态解析

      今天使用easyui控件时遇到一个问题，我在动态的添加numberbox控件时不能正常的实现numberbox的功能。

   

<script type="text/javascript">
        function AddPriceInput() {
            htmlText = '价格：<input name="Or_price" type="text" class="easyui-numberbox" data-options="min:0,precision:2" />'
            $('#price').append(htmlText)
        }
</script>

 

<input type="button" value="添加价格输入框" onclick='AddPriceInput()'/>
<div id="price" >
</div>

 

       感觉是当页面打开的时候，easyui会把自己认识的空间进行解析(也称作渲染)，生成相应的控制javascript代码和css样式，但是动态添加时，easyui并不会再次解析，所以控件功能并不生效。于是打开easyui官网文档查找，找到了Parser一项。文档中介绍了两个用法:

$.parser.parse();       // 解析整个页面
$.parser.parse('#cc');  // 解析指定节点 

 根据文档中的介绍，在控件加入之后添加$.parser.parse('#price')重新解析price节点。

<script type="text/javascript">
        function AddPriceInput() {
            htmlText = '价格：<input name="Or_price" type="text" class="easyui-numberbox" data-options="min:0,precision:2" />'
            $('#price').append(htmlText)
            $.parser.parse('#price')
        }
</script>

这样，numberbox就可以正常实现其功能了。

以此类推，其他控件亦是如此，