Question

我对Jquery很新，并希望解决内容可编辑div上的keydown事件未克隆的原因。当我发现克隆（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>

Answer 1

您的代码中的某些内容不正确 Ian 。在您使用$('list_1')的keydown函数中，您应该使用对元素的引用。顺便说一句，克隆保持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

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

1 个答案: