使用jQuery添加的类的问题

Question

我编写了一个内联脚本,以便在浏览器无法加载SVG并将其替换为PNG图像时自动处理.这部分工作得很好,但我也想改变图像onhover,这个答案对我很有用,除了我不需要它"运行和查找"如果浏览器可以处理SVG并且不使用PNG.所以,当我将一类noSVG(此处称为"myclass")添加到IMG标签时,我想我会触发它.

现在这里是问题的开始,我可以使用CSS来修改添加的类的样式.但我不能使用jQuery来修改它.更奇怪的是,当我为你们添加它给JSFiddle时,它确实有效.在你们认为我使用的是jQuery的糟糕版本之前,我测试了多个版本(包括由JSFiddle使用的1.10.1).

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动态地将类添加到图像,因此您需要使用事件委派

$(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");
    });
});

演示:小提琴