克隆的内容可编辑div不保留keydown事件

-3

我对jquery很新，想要解决内容可编辑div上的keydown事件无法克隆的原因。当我发现克隆（真）时，我以为我已经解决了一些问题，但是我的代码仍然没有工作。下面的代码是我试图实现的简化版本。克隆的内容可编辑div不保留keydown事件

基本上我将一个keydown事件附加到一个内容可编辑的div然后克隆它。然而，克隆的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>

来源

2013-04-08 user2258202

看一看jQuery的文档[**的clone（）**（http://api.jquery.com/clone/）它具有以下注意：'注意：使用.clone（）具有产生具有重复id属性的元素的副作用，这些属性应该是唯一的。在可能的情况下，建议避免使用此属性克隆元素或使用类属性作为标识符。' – Nope 2013-04-08 16:32:10

有些事情不是在你的代码是正确的。在你的keydown函数中你使用的是$('list_1')，你应该使用对元素的引用。顺便说一句，克隆保持id attr这意味着你的克隆元素得到与原始相同的id，这是无效的。见工作代码：

$(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

来源

2013-04-08 16:01:41

嗨，烤好了，好吧，似乎已经完成了这个诀窍 - 谢谢。 – user2258202 2013-04-08 16:39:54

想到我只想说我将id =“List_1”更改为class =“List_1”，以便我可以添加更多div（它们将是动态的）。我也删除了.removeAttr（'id'），事情似乎很好。现在需要在完整版本上试用它。再次感谢。 – user2258202 2013-04-08 16:48:54

浏览器不会抱怨重复的ID。当您尝试使用ID选择器访问元素时，问题就会出现。例如，使用多个＃List_1元素，使用$（'＃List_1'），只会选择第一个匹配的元素。 – 2013-04-08 16:51:11

克隆的内容可编辑div不保留keydown事件

回答

相关问题