Issue using added class with jQuery

Question

I wrote an inline script to automatically handle when a browser can not load an SVG and replace it with a PNG image. This part works great, however I also want to change the image onhover and this answer worked great for me except that I don't need it to "run and find" if the browser can handle SVG and doesn't use the PNGs. So, I thought I would have it trigger when a class of noSVG (herein referred to as "myclass") was added to the IMG tags.

Now here's were the issues start, I can use CSS to modify the style of the class which is added. But I can't use jQuery to modify it. Even stranger, when I went to add it to JSFiddle for you guys, it works. Before you guys think that I'm using a bad version of jQuery I tested multiple versions (including 1.10.1 which is use by JSFiddle).

HTML:

<img src="1.svg" onerror="this.onerror=null; this.src='1.png'; this.className+=' myclass';" class="image" id="1" />

jQuery:

$(function() {
    $(".myclass")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "hover.png";
        $(this).attr("src", src);
        //console.log("moused over");
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("hover.png", ".png");
        $(this).attr("src", src);
        //console.log("moused out");
    });
});

JSFiddle

Arun P Johny · Accepted Answer · 2013-12-13T18:22:29.193

5

You are adding the class myclass dynamically to the image, so you need to use event delegation

$(function () {
    $(document).on('mouseover', ".myclass", function () {
        var src = $(this).attr("src").replace('.png', 'hover.png');
        $(this).attr("src", src);
        //console.log("moused over");
    }).on('mouseout', ".myclass", function () {
        var src = $(this).attr("src").replace("hover.png", ".png");
        $(this).attr("src", src);
        //console.log("moused out");
    });
});

Demo: Fiddle

edited Dec 13 '13 at 18:22

answered Dec 13 '13 at 18:11

Arun P Johny

384,651
66
527
531

3

On a side note, Arun accumulated 95.0k of his rep points answering this same question. :D – isherwood Dec 13 '13 at 18:12
@block14 see the attached fiddle – Arun P Johny Dec 13 '13 at 18:16
@isherwood this + ajax response handler :) – Arun P Johny Dec 13 '13 at 18:18
@ArunPJohny Please read original question. This works in JSFiddle but not when I create a *.html file. Tested with Firefox 26 and Chrome 31. – block14 Dec 13 '13 at 18:19
@block14 your src is not proper `var src = $(this).attr("src").match(/[^\.]+/) + "hover.png";` - what are you trying to do with this – Arun P Johny Dec 13 '13 at 18:21
@block14 try `var src = $(this).attr("src").replace('.png', 'hover.png');` instead – Arun P Johny Dec 13 '13 at 18:22
@ArunPJohny The purpose of the code as a whole is to use the best quality graphics and not run code if not required. The purpose of adding the class is so that hovering the IMG won't trigger the jQuery if a SVG is being used. Thanks for the quick replies! – block14 Dec 13 '13 at 18:28

Issue using added class with jQuery

1 Answers1