x-bootstrap-editable使用问题

Question

需求：点击编辑按钮，出现一个编辑框，效果如图

js代码：$pageeditor_editor就是编辑按钮

    $pageeditor_editor.click(function(event){
        $editable_click = $('body').find($(this).attr('data-obj')).eq($(this).attr('data-index'));
        

        //弹出显示框
        $pageeditor_remark.editable({
            type: "text",                //编辑框的类型。支持text|textarea|select|date|checklist等
            title: "用户名",              //编辑框的标题
            disabled: false,             //是否禁用编辑
            emptytext: "空文本",          //空值的默认文本
            mode: "inline",              //编辑框的模式：支持popup和inline两种模式，默认是popup
        });
    });

html代码：

    <div class="pageeditor-btn">
        <a href="#" class="pageeditor-remark hidden editable editable-click"></a>
        <button class="btn pageeditor-editor">
            <i class="icon fontFamily ts-pencil"></i>
        </button>
    </div>

问题：点击按钮的时候，编辑框没显示，但我为了测试写了下面的代码，是可以显示的，不知道描述的清不清楚

<a href="#" id="username">用户名</a>

        $('#username').editable({
            type: "text",                //编辑框的类型。支持text|textarea|select|date|checklist等
            title: "用户名",              //编辑框的标题
            disabled: false,             //是否禁用编辑
            emptytext: "空文本",          //空值的默认文本
            mode: "inline",              //编辑框的模式：支持popup和inline两种模式，默认是popup
           
        });