html - jquery change event when image src changes

Question

$('img.product_image').attr('src').change(function() {
    alert($('img.product_image').attr('src'));
});

Hi ya'll

I am trying to write some code that will alert the img.product_image when the src changes, but when I run my page and click a button to change the image src, the alert does not come up...is my syntax wrong?

here is the image:

<img class="product_image colorbox-1160" id="product_image_1160" alt="Black Onyx Ring" title="Black Onyx Ring" src="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring.jpg" width="400">

and the image src would change when I would click on one of these thumbnails:

<div class="wpcart_gallery" style="text-align:center; padding-top:5px;">
    <a rev="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/DSC_0162.jpg" class="thickbox cboxElement" rel="Black Onyx Ring" href="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/DSC_0162.jpg" title="DSC_0162">
        <img width="50" height="50" src="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/DSC_0162-50x50.jpg" class="attachment-gold-thumbnails colorbox-1160 " alt="DSC_0162" title="DSC_0162">
    </a>
    <a rev="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring1.jpg" class="thickbox cboxElement" rel="Black Onyx Ring" href="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring1.jpg" title="Black Onyx Ring">
        <img width="50" height="50" src="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring1-50x50.jpg" class="attachment-gold-thumbnails colorbox-1160 " alt="Black Onyx Ring" title="Black Onyx Ring">
    </a>
    <a rev="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring.jpg" class="thickbox" rel="Black Onyx Ring" href="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring.jpg" title="Black Onyx Ring">
        <img width="50" height="50" src="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring-50x50.jpg" class="attachment-gold-thumbnails colorbox-1160 " alt="Black Onyx Ring" title="Black Onyx Ring">
    </a>
</div>

Answer 1

You can use .load event in this case:

$('img.product_image').on('load', function () {
 alert($('img.product_image').attr('src'));
});