$.().append(태그) 후 해당 태그에 dbclick 안되는 문제
본문
우선 해당 작업은
#page_menu_list li div 영역에 더블클릭하면 그 영역을 비우고 button태그를 append를 하고
다시 다른 영역을 클릭하면 원복되는 소스입니다.
예시 > http://jsfiddle.net/jFycy/
<ol class="page_list_wrap" id="page_menu_list">
<li>
<div class="editor_menu_page page_on_status">
<a href="javascript:void(0)" onclick="select_pagename_list()">메인페이지</a>
<span class="glyphicons glyphicons-cogwheel" style="margin-top:16px;"></span>
</div>
</li>
<ol>
<script>
$(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 한다.
}
});
});
더블클릭 영역을
#page_menu_list li div
이렇게 주었습니다.
div 안에 다시 지우고 append를 했으니
처음에는 작동되지만 2번째 더블클릭을 하면
작동이 안되네요.
그럼 다시 해당 dbclick 호출해야되는데 새롭게 append 했으니 잡히지가 않네요.
좋은 방법이 있을까요?
답변 2
<div id="page_menu_list">
<ul>
<li>
<div class="inner">1</div>
<div class="inner2">1</div>
<div class="inner">1</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>
더블 클릭을 몇 번을 해도 input box랑 button이 잘 생깁니다.
작동이 안 된다는 건 어떤 의민지요?
아 죄송합니다. 위에 다시 HTML 태그 올려드렸습니다. 저 태그로 하면
<div class="inner">1</div>
보통은 이렇게 하면 되지만
저같은 경우는 a태그 span 태그도 존재하기 때문에
이것을 append해서 붙이면 해당 태그가 안먹습니다 ㅠ,ㅠ
왕계란님 수정해서 올려드립니다.
<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>$('body').on('dblclick','#page_menu_list li div a', function(e) {
$('#page_menu_list li div').on('dblclick', 'a', function(e) {
이거나 저거나 똑같겠지만요...
답변을 작성하시기 전에 로그인 해주세요.
