Проблема с использованием добавленного класса с jQuery

Question

Я написал встроенный скрипт, чтобы автоматически обрабатывать, когда браузер не может загрузить SVG и заменить его изображением PNG. Эта часть отлично работает, однако я также хочу изменить изображение onhover, и this answer отлично поработал для меня, за исключением того, что мне не нужно «запускать и находить», если браузер может обрабатывать SVG и не использует PNG. Итак, я думал, что у меня будет триггер, когда класс noSVG (именуемый здесь как «myclass») был добавлен в теги IMG.

Теперь вот начались проблемы, я могу использовать CSS для изменения стиля добавляемого класса. Но я не могу использовать jQuery для его изменения. Даже незнакомец, когда я пошел добавить его в JSFiddle для вас, ребята, работает. Прежде чем вы, ребята, подумаете, что я использую плохую версию jQuery, я протестировал несколько версий (в том числе 1.10.1, который используется 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

Answer 1

Вы добавляете класс myclass динамически изображения, так что вы должны использовать 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"); 
    }); 
}); 

Демонстрация: Fiddle