-3

我对 Jquery 很陌生，并希望解决无法克隆内容可编辑 div 上的 keydown 事件的原因。当我发现 clone(true) 时，我以为我已经解决了问题，但是我的代码仍然无法正常工作。下面的代码是我想要实现的简化版本。

基本上我将 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>
4

1 回答 1

1

正如Ian所指出的那样，您的代码中有些事情是不正确的。在您使用的 keydown 函数中$('list_1')，您应该使用对元素的引用。顺便说一句，clone keep 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'));
});

看演示

于 2013-04-08T16:01:41.197 回答