Question

我似乎无法解决这个问题并正确解决这个问题。从逻辑上讲，我应该能够点击并选择刚刚重命名的新li。但事实并非如此。 Currenty，我能够点击并选择任何LI，它将突出显示。单击重命名按钮，然后单击新重命名的li后，背景颜色不会更改，但其余颜色仍然可以正常工作（尚未重命名的li）。我附上了以下问题的图片：

enter image description here

以下是HTML标记：

<!DOCTYPE html>

<html>

<head>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>

<style type='text/css'>

.active {
    background-color: rgb(128,128,128);
}
#colors {
    border: 1px solid #000;
    width: 100px;
    list-style: none;
    margin: 0;
    padding: 2px;
    cursor: arrow;
}
</style>



<script type='text/javascript'>

function renameLI() {

    var li = $('#colors').find('.active')

    li.replaceWith('<input type="text" id="change_me" value='+li.text()+'>');

}

$(window).load(function(){


    $('li').click(function(){

        $('li.active').removeClass('active');

        $(this).addClass('active');

    });


    $('#colors').focusout(function() {

        $('#change_me').replaceWith('<li>' + $("#change_me").val() + '</li>');

    });


});

</script>


</head>
<body>
  <input type="button" value="raname" id="rename" onclick="renameLI()">
<ul id="colors">
    <li>red</li>
    <li>green</li>
    <li>blue</li>
    <li>yellow</li>
    <li>orange</li>
    <li>purple</li>
</ul>


</body>


</html>

Answer 1

您正在将事件监听器附加到li，然后使用replaceWith将其删除。那是一个新的DOM元素，并且没有监听器。

使用

$(document).on('click','li',function(){

阅读：http://learn.jquery.com/events/event-delegation/

长答案：

使用$('li').click(function(){你说你是DOM，当你准备好了所有li时，如果点击它们，就可以执行此功能。和DOM一样，好吧，让我找到所有这些并注册每个人的监听器。那么你就像$('#change_me').replaceWith('<li>' + $("#change_me").val() + '</li>'); Boom一样，li已经消失了，这里是一个新的。可怜的旧DOM甚至不知道存在一个。

因此，当您将该侦听器委托给$(document)时，他会说，如果您看到任何li被点击，请执行此功能。即使您添加了新的li，并且点击了li，$(document)也就是全部，嘿，我通过事件传播看到了这一点，让我们来做这个功能。所有事件都从它们开始的位置冒泡到文档的顶层。

Answer 2

您可以使用html（）而不是replaceWith（）。

$(function () {

    $("#rename").on("click", function(){
        var li = $('#colors').find('.active');
        li.html('<input type="text" id="change_me" value='+li.text()+'>');
    });

    $('li').on("click", function () {
        $('li.active').removeClass('active');
        $(this).addClass('active');
    });

    $('#colors').on("focusout", function () {
        $('#change_me').replaceWith('<li>' + $("#change_me").val() + '</li>');
    });
});

这是一个有效的 JSFiddle

我还使用on（）清理了你的click（），并将HTML中的onclick删除为你的jQuery代码。

一旦重命名，似乎无法点击并突出显示所选的li

2 个答案: