javascript - 悬停事件在第一次调用时停止鼠标输入事件。

Question

我有一个用户可以通过 JavaScript 添加的项目列表。我想要的是当用户将鼠标悬停在列表项上时使字形图标可见。现在它可以工作，但只有在用户将鼠标移入列表项然后将鼠标移出列表项之后。完成此操作后，一旦将鼠标移回列表项，列表项就会开始工作。

Jquery:

//When the user hovers over a list item give them the option to delete it
$('.list-item-container').hover(function(){
    $('.list-item').on({
        mouseover: function(){
            $('.glyphicon-remove', this).css('visibility', 'visible');

            //When the user click to remove the list item remove it from the list
            $('.glyphicon-remove').on('click', function(){
                //TODO: Popup modal for delete confirmation
                $(this).parent().remove();
            });
        },
        mouseout: function(){
            $('.glyphicon-remove', this).css('visibility', 'hidden');
        }
    });
});

HTML:

<div class="list-item-wrapper">
    <ul class="list-item-container">
        <li class="row list-item">
            <input type="checkbox" class="item-done">
            <label for="list-done">My to-do-list</label>

            <span class="glyphicon glyphicon-remove pull-right"></span>
        </li>
    </ul>
</div>

Answer 1

您的 jQuery 代码在鼠标悬停时附加事件(每次也是 - 不太好) - 所以您的代码没有执行您想要执行的操作。

使用 CSS 就容易多了。

.glyphicon-remove {
    visibility: hidden;
}


.list-item-container:hover .glyphicon-remove {
    visibility: visible;
}

然后，唯一需要的 JavaScript 就是删除该元素。

$('.list-item-container').on('click', '.glyphicon-remove', function() {
    $(this).parent().remove();
});