img src not changed in jQuery script in Firefox and IE

Question

I have img

 <img src="captcha.jpg" id="my-image"/>

and jQuery script for change captcha image

<script>
    $(document).ready($("#my-image").click(function(){
        $('#my-image').attr('src', "captcha.jpg");
                        alert('adfgf');
    }));
</script>

when i click to image triggered image change and call alert in chrome. But in Firefox and in IE alert is called but image not changed. How fix it?

EDIT

@RequestMapping(value = "/captcha.jpg", method = RequestMethod.GET)
    public void captcha(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        super.captcha(req, resp);
    }

Answer 1

You made an error using the ready handler, you need to pass it a function.

Here's what you should do instead :

$(document).ready(function() {
    $("#my-image").click(function(){
        $('#my-image').attr('src', "captcha.jpg");
        alert('adfgf');
    });
});

EDIT : I included a snippet with an example to show you that it works.

$(document).ready(function() {
    $("#my-image").click(function(){
        $('#my-image').attr('src', "//placehold.it/100x100");
        alert('adfgf');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="//placehold.it/50x50" id="my-image"/>

EDIT n°2 : And if you just want to reload/refresh your image, you can use :

$('#my-image').attr('src', "captcha.jpg" + Math.random())

(Source)