우선 해당 작업은 

#page_menu_list li div 영역에 더블클릭하면 그 영역을 비우고 button태그를 append를 하고 

다시 다른 영역을 클릭하면 원복되는 소스입니다.

예시 > http://jsfiddle.net/jFycy/

<div id="page_menu_list">
    <ul>
        <li>
            <div class="inner">
              <a href="javascript:void(0)">메인페이지</a>
               <span class="glyphicons glyphicons-cogwheel" style="margin-top:16px;"></span>
            </div>
            <div class="inner2">
              <a href="javascript:void(0)">메인페이지1</a>
              <span class="glyphicons glyphicons-cogwheel" style="margin-top:16px;"></span>
            </div>
            <div class="inner">
             <a href="javascript:void(0)">메인페이지2</a>
             <span class="glyphicons glyphicons-cogwheel" style="margin-top:16px;"></span>
            </div>
        </li>
    </ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
    $('body').on('dblclick','#page_menu_list li div', function(e) {
        e.stopPropagation();
        var currentEle = $(this);
        var Ele = $(this).html(); // 해당 li태그에 더블클릭하면 html()화 해서 나중에 append에 쓰인다.
        $(currentEle).empty(); // 해당 태그에 지우고
        $(currentEle).append('<input type="text"><button>버튼</button>');  // 새로운 태그를 append한다. 
        $(document).click(function () {  // 다른 영역에 클릭하면 다시 원복한다!
            $(currentEle).empty(); // 다시 비우고
            $(currentEle).append(Ele) // 다시 기존에 저장했던 것을 append 한다.
        });
    });
});
</script>

더블클릭 영역을 

#page_menu_list li div 

이렇게 주었습니다.

div 안에 다시 지우고 append를 했으니

처음에는 작동되지만 2번째 더블클릭을 하면 

작동이 안되네요.

그럼 다시 해당 dbclick 호출해야되는데 새롭게 append 했으니 잡히지가 않네요.

좋은 방법이 있을까요?