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();
});

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

1 个答案: