CODEWITHSUNDEEP
jquery
Mesuti
Mesuti

Reputation: 908

jQuery dynamicly element mouseout-mouseover events

Below codes are working when mouse on the current li tag and out the li tag. The mouseover function create a img tag in li tag when i drag mouse to this new img tag mouseout function works. But the new "img" tag in the current "li" tag this is not out of "li" tag. Where is my problem?

$(document).ready(function(){

        $("div.Michaela ul li").on("mouseover",function(){
            if(!$(this).find("span img").length){
                $(this).find("span").append("<img src='http://cupios.com/app_theme/cupios/images/pen_icon.png'>");
            }
        });

        $("div.Michaela ul li").on("mouseout",function(){
            $(this).find("span img").remove();
        });
    });

Upvotes: 1

Views: 851

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388436

The event delegation syntax of on is

$(static-ancestor).on(event, dynamic-element-selector, handler)

so if the div is static element then

$(document).ready(function () {
    $("div.Michaela").on("mouseover", ' ul li', function () {
        if (!$(this).find("span img").length) {
            $(this).find("span").append("<img src='http://cupios.com/app_theme/cupios/images/pen_icon.png'>");
        }
    }).on("mouseout", ' ul li', function () {
        $(this).find("span img").remove();
    });
});

another syntax to write the same is

$(document).ready(function () {
    $("div.Michaela").on({
        mouseover: function () {
            if (!$(this).find("span img").length) {
                $(this).find("span").append("<img src='http://cupios.com/app_theme/cupios/images/pen_icon.png'>");
            }
        },
        mouseout: function () {
            $(this).find("span img").remove();
        }
    }, ' ul li');
});

If the div also is dynamic the bind the event to document and them move the div selector div.Michaela to dynamic element selector like

$(document).on(event, 'div.Michaela ul li', handler)

Upvotes: 1

Related Questions