Jquery only works once per page load - want it work more than once without having to reload page

Question

I want to be able to run this script more than once without reloading the page. Have looked att using Live events, but couldn't figure it out. Any help would be greatly appreciated. Btw, I'm a noob and I haven't written the script myself.

<script type="text/javascript">

var $elem = $('#wrapper');
$(document).ready(function(){
    $("a#trigger").click(function(event){
        event.preventDefault();
        var full_url = this.href;
        var parts = full_url.split("#");
        var trgt = parts[1];
        var target_offset = $("#"+trgt).offset();
        var target_top = target_offset.top;
        $('html, body').delay(2000).animate({scrollTop:target_top}, 2000).delay(250).queue(function() {
            $('#arm').hide();
            $('#arm').toggleClass('arm-down');
        });
    });
    $(function(){
        $('#arm').hide();
        $('#arm').toggleClass('arm-down');
        $('a#trigger').click(function() {
            $('#trigger').addClass('active');
            $('#arm').delay(500).slideToggle().delay(750).queue(function() {
                $('#arm').toggleClass('arm-grab');
            });
        });
    });
});
</script>

An example, like a jsFiddle, demonstrating what's not working would be helpful. — j08691, Feb 24 '12 at 16:47
Some info on when, besides page load, you want the function to trigger would be nice. — Alexander Varwijk, Feb 24 '12 at 16:49
I don't want it to trigger the function on load, but I want to be able to trigger it more than once per load. — David Ashman, Feb 26 '12 at 20:16

score 1 · Answer 1 · answered Feb 24 '12 at 16:52

1

Lets assume you dont want to set the click handler a bunch of times. That just leaves the anonoymous function.

Step 1. !anonymous

Change the anonymous function into a not-anonymous function.

function blammo(triggeringEvent)
{
    $('#arm').hide();
    $('#arm').toggleClass('arm-down');
    $('a#trigger').click(function()
    {
        $('#trigger').addClass('active');
        $('#arm').delay(500).slideToggle().delay(750).queue(function()
        {
            $('#arm').toggleClass('arm-grab');
        });
    });
}

Step 2. go blammo

Use the not-anonymous function and use the .on() jQuery function.

$(document).ready(function()
{
  ... blah ...
  blammo(null); // instead of the anonymous function.

  $(something).on("some event, maybe click", blammo);
}

answered Feb 24 '12 at 16:52

DwB

37,124
11
56
82

Easier to write, sure. But there's no functional change from doing it this way. – Anthony Grist Feb 24 '12 at 16:57
If by "no functional change" you mean that the function is now, also, called in response to the event (as setup by the .on()) then I agree. Otherwise, I must disagree. The addition of the .on() is new functionality. – DwB Feb 24 '12 at 19:02
@DwB - Thanks! Total noob, sorry for that. But don't understand step 2. What is blah suppose to include instead? And what about the top part of the script, row 1-14? Thanks again! – David Ashman Feb 26 '12 at 20:10
blah is the top part of the script. – DwB Feb 27 '12 at 15:07

Paul Nikonowicz · Answer 2 · 2012-02-27T14:34:01.197

Make your anonymous function:

function(event){
        event.preventDefault();
        var full_url = this.href;
        var parts = full_url.split("#");
        var trgt = parts[1];
        var target_offset = $("#"+trgt).offset();
        var target_top = target_offset.top;
        $('html, body').delay(2000).animate({scrollTop:target_top}, 2000).delay(250).queue(function() {
            $('#arm').hide();
            $('#arm').toggleClass('arm-down');
        });
    });
    $(function(){
        $('#arm').hide();
        $('#arm').toggleClass('arm-down');
        $('a#trigger').click(function() {
            $('#trigger').addClass('active');
            $('#arm').delay(500).slideToggle().delay(750).queue(function() {
                $('#arm').toggleClass('arm-grab');
            });
        });
    });
}

into a function

function yourFunction(event)

which reduces your onLoad to

$(document).ready(yourFunction)

now you can call your function whenever you want

<script>
//call your function
yourFunction(null)
</script>

Thanks for answer, but being a total noob, I don't fully follow your fix. Don't know exactly how to make it into a var. Sorry. Could you please be more exact in the steps? Thanks! — David Ashman, Feb 26 '12 at 20:19
Don't focus on the var part. i made an edit and changed the var keyword to function. — Paul Nikonowicz, Feb 27 '12 at 14:34

score 0 · Answer 3 · answered Feb 24 '12 at 16:46

0

If you want any chunk of js to run more than once, put the whole thing in a function, then use setTimeOut() in it to call itself.

answered Feb 24 '12 at 16:46

Abhranil Das

5,702
6
35
42

But setTimeOut() calls a function every m secs right? I don't the question asks for that? – Ajai Feb 24 '12 at 16:48
No @Ajai, that's setInterval(). – Aistina Feb 24 '12 at 17:05
@Abhrani Das: Guess I was a little confused. Sorry. – Ajai Feb 24 '12 at 20:17

score 0 · Answer 4 · answered Feb 24 '12 at 17:04

Have no idea what is going on here, but I'll try anyway :-)

<script type="text/javascript">
$(function(){
    $('#arm').hide().toggleClass('arm-down');
    $('#trigger').on('click', function(event) {
         event.preventDefault();
         var hash = this.href.split("#"),
             target_top = hash[1].offset().top;
         $(this).addClass('active');
         $('#arm').delay(500).slideToggle().delay(750).queue(function() {
             $(this).toggleClass('arm-grab');
         });
         $('html, body').delay(2000).animate({scrollTop:target_top}, 2000).delay(250).queue(function() {
             $('#arm').hide().toggleClass('arm-down');
         });
    });
});
</script>

Jquery only works once per page load - want it work more than once without having to reload page

4 Answers4

Linked