使用jQuery添加的類問題

Question

我編寫了一個內聯腳本來自動處理瀏覽器無法加載SVG並將其替換爲PNG圖像的情況。這部分工作很好，但我也想改變形象onhover和this answer偉大的工作對我來說除了我不需要它來「運行並找到」，如果瀏覽器可以處理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動態的形象，所以你需要使用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