Mouseout and mouseleave not working

Question

Hi I am using mouseout and mouseleave methods but both are not working. I tried to fix it but cant find the solution. My code looks fine, it has no err

Answer 1

Looking at your fiddle page, there might be some issues with the mouse events being detected due to the complication of the code aside from this part, however using this should get you most of the way there:

$(function() {
    $(".chzn-select").chosen();

    $('a').click(function() {
        $('.mydiv').removeClass().addClass('redbrd mydiv');// NOTE this is in case your other question comes into play with this one.
    });
    $('body').on('mouseenter', '.redbrd', function() {
       $('body').append('
some text
');
    });
    $('body').on('mouseleave', '.redbrd', function() {
        $('.mmt').remove();
    });
});

EDIT: After review, your adding li to the page after your chosen thing.

This should work with that:

$(".chzn-select").chosen();
$(function() {
    $('a').click(function() {
        $('.mydiv').addClass('redbrd');

        $('.redbrd').on('mouseover', 'li', function(e) {
            var $target = $(e.target);
            if ($('#mmt').length === 0) {
                var htm = '
' + $target.text() + ' some text
';
                $('body').append(htm);
            }
        });
        $('.redbrd').on('mouseout', function() {
            $('#mmt').remove();
        });
    });
});

Updated your fiddle here:http://jsfiddle.net/JtQHY/1/ so you can test it.