개발 Q&A

제목 $.().append(태그) 후 해당 태그에 dbclick 안되는 문제
카테고리 JavaScript
글쓴이 amkorjquery 작성시각 2016/11/24 12:25:15
댓글 : 1 추천 : 0 스크랩 : 1 조회수 : 16320   RSS

우선 해당 작업은 

 

#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 했으니 잡히지가 않네요.

 

좋은 방법이 있을까요?

 다음글 php try 문을 이용한 예외처리시 예외처리 코드에 ... (2)
 이전글 알맞은 쿼리 수정이 필요합니다.. (1)

댓글

윤동훈 / 2016/11/24 13:59:06 / 추천 0

$(function () {
    $(document).on('dblclick','#page_menu_list li div, a', 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).html(Ele);
        });
    });
});

div 이기 때문에 그안에 a 태그로 눌렀을때 처리가 안되서..

'body' => document 로 바꾸시고 위코드로 하시면될듯