jQuery spinner风格，右侧加减,在js里添加input标签，风格失效

Question

 添加的bootstrap-spinner.css和jquery.spinner.js路径没问题

我在js里添加以下代码，加减插件无效果
ocell.innerHTML='<div class="input-group spinner" data-trigger="spinner" id="spinner">'
                            +'<input type="text" id="organizationCount" name="organizationCount" class="form-control" value="1" data-max="100" data-min="1" data-step="1" '
                            + ' onkeypress="return noNumbers(event,this)" onchange="organizationCountKeyUp(this);" onkeyup="organizationCountKeyUp(this);">'
                            +'<div class="input-group-addon">'
                            +'<a href="javascript:;" id="spinUp" class="spin-up" data-spin="up"><i class="icon-sort-up"></i></a>'
                            +'<a href="javascript:;" class="spin-down" data-spin="down"><i class="icon-sort-down"></i></a>'
                            +'</div></div>';
我在jsp里添加以下代码，加减插件有效果
<div class="input-group spinner" data-trigger="spinner"
                                id="spinner">
                                <input type="text" id="organizationCount"
                                    name="organizationCount" class="form-control" value="${jdList.organizationCount}"
                                    data-max="100" data-min="1" data-step="1" data-rule="quantity"
                                    onkeypress="return noNumbers(event,this)"
                                    onchange="organizationCountKeyUp(this);"
                                    onkeyup="organizationCountKeyUp(this);">
                                <div class="input-group-addon">
                                    <a href="javascript:;" class="spin-up" data-spin="up"><i
                                        class="icon-sort-up"></i></a> <a href="javascript:;"
                                        class="spin-down" data-spin="down"><i
                                        class="icon-sort-down"></i></a>
                                </div>
                            </div>

        求大神帮帮忙哈，js添加的控件怎么就没有效果呢？                    

Answer 1

通过样式标注的插件，插件一般是在dom ready后渲染，你js添加的html是在dom ready后再执行的吧，这样是没有效果的，需要手动调用api进行初始化

 ocell.innerHTML='<div class="input-group spinner" data-trigger="spinner" id="spinner">'
                            +'<input type="text" id="organizationCount" name="organizationCount" class="form-control" value="1" data-max="100" data-min="1" data-step="1" '
                            + ' onkeypress="return noNumbers(event,this)" onchange="organizationCountKeyUp(this);" onkeyup="organizationCountKeyUp(this);">'
                            +'<div class="input-group-addon">'
                            +'<a href="javascript:;" id="spinUp" class="spin-up" data-spin="up"><i class="icon-sort-up"></i></a>'
                            +'<a href="javascript:;" class="spin-down" data-spin="down"><i class="icon-sort-down"></i></a>'
                            +'</div></div>';

                                                    $('#spinner').spinner();///初始化