CODEWITHSUNDEEP
jquery
REZA SALEHI
REZA SALEHI

Reputation: 39

jquery problem- function repeats

I have two thumbnails in <a> tag by clicking them another image (main image) src will change to <a> hrefs tag to show fullsize image.

The function works, but problem is that when I track the function It will repeat relatively to number of clicks.

If its 1st click it runs once, if its 2nd click it runs twice and so on. Here is my code:

<div class="wraptocenter"><img alt="" src=""  id="myim"  /></div>
  <a href="images/cam1.jpg" class="changemimg"> <img alt="" src="images/10.jpg"  /></a> 
   <a href="images/cam.jpg" class="changemimg" ><img alt="" src="images/9.jpg" /></a> 
   <img src="" id="hiddenimg" style="display:none" />



$(document).ready(function () {
    $(".changemimg").bind('click', set);
    function set() {
        $("#myim").attr("src", "images/indicators.gif");
        var path = $(this).attr("href")
        $("#hiddenimg").attr("src", path);
        $("#hiddenimg").load(function () { alert('hi'); $("#myim").attr("src", path); });
        return false;

    }
});

Thanks in advance for any suggestions!

Upvotes: 0

Views: 943

Answers (2)

Shef
Shef

Reputation: 45589

Try:

$(document).ready(function () {
    $(".changemimg").bind('click', set);

    function set(e) {
       e.preventDefault();

        $("#myim").attr("src", "images/indicators.gif");
        var path = $(this).attr("href");
        var myimg = new Image();
        $(myimg)
            .load(function(){
                alert('hi');
                $('#myim').attr('src', path);
            })
            .attr('src', path);
    }
});

Here is a demo

Upvotes: 0

hvemuri
hvemuri

Reputation: 11

Your Load event handler on the "hiddenimg" element is set everytime the anchor element is clicked. So after each click the number of Load event handlers are increasing by one. Following code should resolve your issue

    $(document).ready(function () {
        var path;
        $(".changemimg").bind('click', set);
        $("#hiddenimg").load(function () {
            alert('hi');
            $("#myim").attr("src", path);
        });
        function set() {
            $("#myim").attr("src", "images/Calendaricon.gif");
            path = $(this).attr("href");
            $("#hiddenimg").attr("src", path);
            $("#hiddenimg").attr("style", "display:block");
            return false;
        }
    });

Upvotes: 1

Related Questions