Jquery Prevent reload click function

Question

I am trying to prevent the page from refreshing when the "replayclick" is clicked. Id like it to just run the set time in and out for the "#cmp" elements. I am sure its something simple I am missing.

$("#replayclick").click(function(event) {
    event.preventDefault(); 
    setTimeout(function () {
        $("#replay").fadeOut();
    }, 0);
    setTimeout(function () {
        $("#cmp1").fadeIn();
    }, 0);
    setTimeout(function () {
        $("#cmp1").hide();
    }, 2000);
    setTimeout(function () {
        $("#cmp2").fadeIn();
    }, 2000);
    setTimeout(function () {
        $("#cmp2").hide();
    }, 4000);
    setTimeout(function () {
        $("#cmp3").fadeIn();
    }, 4000);
    setTimeout(function () {
        $("#cmp3").hide();
    }, 6000);
    setTimeout(function () {
        $("#cmp4").fadeIn();
    }, 6000);
    setTimeout(function () {
        $("#cmp4").hide();
    },8000);
    setTimeout(function () {
        $("#replay").fadeIn();
    }, 8000);

});

HTML

<div class="cm-bodyphoto">
  <div id="replay" class="cm-image-container"><a id="replayclick" href=""><img class="cm-image" src="replay.png" height="155" width="298"></a></div>
  <div id="cmp1" class="cm-image-container"><a href="#"><img class="cm-image" src="slide-1.png" height="155" width="298"></a></div>
  <div id="cmp2" class="cm-image-container"><a href="#"><img class="cm-image" src="slide-2.png" height="155" width="298"></a></div>
  <div id="cmp3" class="cm-image-container"><a href="#"><img class="cm-image" src="slide-3.png" height="155" width="298"></a></div>
  <div id="cmp4" class="cm-image-container"><a href="#"><img class="cm-image" src="slide-4.png" height="155" width="298"></a></div></div>

return false as codingthewheel said, but why not just attack click event to image which wouldnt redirect to begin with? — BillHaggerty, Jan 07 '15 at 18:16
Could you maybe give us a fiddle. I've made one and it's [not refreshing](http://jsfiddle.net/sp69e64u/). As noted `return false` is not needed. — Spencer Wieczorek, Jan 07 '15 at 18:16
no it is not in a document ready but it is calling jquery library 1.11. — aclm, Jan 07 '15 at 18:37
Could it be the combination of the setTimeout functions going on below? — aclm, Jan 07 '15 at 18:38

aclm · Answer 1 · 2015-01-07T18:56:27.543

Ok I figured it out. It might not be the cleanest solution but it works for me. Looks like i forgot an additional }); at the end.

Thank you guys for helping get the wheels turning :)

$(window).load(function(){
    setTimeout(function () {
        $("#cmp1").hide();
    }, 2000);
    setTimeout(function () {
        $("#cmp2").fadeIn();
    }, 2000);
    setTimeout(function () {
        $("#cmp2").hide();
    }, 4000);
    setTimeout(function () {
        $("#cmp3").fadeIn();
    }, 4000);
    setTimeout(function () {
        $("#cmp3").hide();
    }, 6000);
    setTimeout(function () {
        $("#cmp4").fadeIn();
    }, 6000);
    setTimeout(function () {
        $("#replay").fadeIn();
    }, 8000);
 $("#replayclick").click(function(event) {
    event.preventDefault(); 
    setTimeout(function () {
        $("#replay").fadeOut();
    }, 0);
    setTimeout(function () {
        $("#cmp4").hide();
    }, 0);
    setTimeout(function () {
        $("#cmp1").show();
    }, 0);
    setTimeout(function () {
        $("#cmp1").hide();
    }, 2000);
    setTimeout(function () {
        $("#cmp2").fadeIn();
    }, 2000);
    setTimeout(function () {
        $("#cmp2").hide();
    }, 4000);
    setTimeout(function () {
        $("#cmp3").fadeIn();
    }, 4000);
    setTimeout(function () {
        $("#cmp3").hide();
    }, 6000);
    setTimeout(function () {
        $("#cmp4").fadeIn();
    }, 6000);
    setTimeout(function () {
        $("#replay").fadeIn();
    }, 8000);
});
});

Jquery Prevent reload click function

1 Answers1