Jquery LIVE, с добавлением, ломает MouseOver

Question

Вот код:

<p>Morbi vitae erat. Cras sem lorem, porta ut, aliquam id, porta sed, velit.
Pellentesque scelerisque erat rhoncus nulla. <span class="findme">find me</span>Integer pulvinar, est ut</p>

<script type="text/javascript">
$(document).ready(function() {

    $('.findme').live('mouseover mouseout', function(event) {
        if (event.type == 'mouseover') {
            // do something on mouseover
            $(this).css("background", "red");
            $(this).append('<span id="dropdown">XXX</span>');
        } else {
            // do something on mouseout
            $(this).css("background", "transparent");
            $('#dropdown').remove();
        }
    });

});
</script>

Я хочу, чтобы рядом со следующим отображался выпадающий элемент, позволяющий пользователю изменять настройки, когда они наводят указатель мыши.Проблема заключается в том, что когда мышь наведена на XXX, она вызывает указатель мыши, даже если он находится внутри .findme. Есть идеи, почему это так?Или лучший способ добиться этого эффекта?

Answer 1

Это стандартное поведение mouseout. Если вы используете jQuery 1.4, вы должны заменить mouseover / mouseout на mouseenter / mouseleave.

EDIT: Пример кода:

$(document).ready(function() {

    $('.findme').live('mouseenter', function(event) {
        $(this).css("background", "red");
        $(this).append('<span id="dropdown">XXX</span>');
    }).live('mouseleave', function(event) {
        $(this).css("background", "transparent");
        $('#dropdown').remove();
    });

});

Answer 2

В итоге все заработало правильно:

$(".findme").mouseenter(function(){
    // do something on mouseover
    $(this).css("background", "red");
    $(this).append('<span id="dropdown">edit</span>');
}).mouseleave(function(){
    // do something on mouseout
    $(this).css("background", "transparent");
    $('#dropdown').remove();
});

Надеюсь, это поможет другим с такой же потребностью.

Answer 3

Попробуйте использовать mouseenter и mouseleave.

.live({
    mouseenter:
       function()
       {

       },
    mouseleave:
       function()
       {

       }
   }
);