2013-04-08 2 views
-3

저는 Jquery에 매우 익숙하며 컨텐츠 편집 가능 div에서 keydown 이벤트가 복제되지 않는 이유를 해결하려고합니다. 클론 (사실)을 발견했을 때 문제를 해결했다고 생각했지만 코드가 작동하지 않습니다. 아래의 코드는 내가 성취하고자하는 것을 단순화 한 것입니다.복제 된 컨텐츠 편집 가능한 div 유지되지 않는 keydown 이벤트

기본적으로 콘텐츠 편집 가능한 div에 keydown 이벤트를 첨부하고 복제하고 있습니다. 그러나 복제 div 원래 div처럼 작동하지 않습니다.

나는 지금까지 좋은 해결책을 찾고 있었고, 누군가가 나에게 답을 줄 수 있기를 바랬다. 이안을 지적

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>untitled</title> 

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script type="text/javascript"> 


$(document).ready(function() { 

    var mymax1 = 10; 

    $('#List_1').keydown(function(e){ check_charcount(mymax1, e); }); 

    function check_charcount(mymax1, e) 
    { 
     <!--prevent line breaks, that is the enter key from working--> 
     if(e.keyCode==13){ 
     e.preventDefault(); 
     } 

     if(e.which != 8 && $('#List_1').text().length > mymax1{ 
      $("#List_1").css("background-color","yellow"); 

      e.preventDefault(); 
     } 
    } 

    <!----> 
    var $cloned = $('#hope').clone(true); 

    $('#placeHere').append($cloned.html()); 
    }); 

</script> 

</head> 
<body> 

<div id="hope"> 
<div id="List_1" contentEditable="true">TEXT</div> 
</div> 

</br> 
<div id="placeHere"></div> 
</body> 
</html> 
+1

가에 대한 jQuery를 문서에서보세요 : 작업 코드를 참조하십시오 note :'주의 : .clone()을 사용하면 고유 한 것으로 생각되는 중복 된 id 속성을 가진 요소를 생성하는 부작용이 있습니다. 가능한 경우,이 속성을 가진 요소를 복제하거나 클래스 속성을 식별자로 사용하지 않는 것이 좋습니다. " – Nope

답변

1

몇 가지 코드가 정확하지 않았다. $('list_1')을 사용하는 keydown 함수에서 요소에 대한 참조를 사용해야합니다. BTW, clone keep attr. 복제 된 요소가 원본과 동일한 ID를 가져 오는 것을 의미합니다. 이는 유효하지 않습니다. 그 다음이 [** 클론() ** (http://api.jquery.com/clone/)

$(document).ready(function() { 

    var mymax1 = 10; 

    $('#List_1').keydown(function (e) { 
     check_charcount(mymax1, e); 
    }); 

    function check_charcount(mymax, e) { 

     if (e.keyCode == 13) { 
      e.preventDefault(); 
     } 

     if (e.which != 8 && $(e.target).text().length > mymax) { 
      $(e.target).css("background-color", "yellow"); 

      e.preventDefault(); 
     } 
    } 


    var $cloned = $('#hope').clone(true); 

    $('#placeHere').append($cloned.contents().removeAttr('id')); 
}); 

SEE DEMO

+0

Hi roasted, 트릭을 완료 한 것 같습니다. – user2258202

+0

생각해 보겠습니다. 나는 id = "List_1"을 class = "List_1"로 변경하여 더 많은 div를 추가 할 수 있다고 말하고 싶습니다. 나는 또한 .removeAttr ('id')를 제거하고 모든 것이 잘 작동하는 것처럼 보입니다. 지금 풀 버전에서 사용해 볼 필요가 있습니다. 다시 한번 감사드립니다. – user2258202

+1

브라우저는 중복 ID에 대해 불평하지 않습니다. id 선택자를 사용하여 요소에 액세스하려고하면 문제가 발생합니다. 예를 들어, 여러 # List_1 요소를 사용하여 $ ('# List_1')을 사용하면 첫 번째로 일치하는 요소 만 선택됩니다. –