Jquery Only Works Once Per Page Load - Want It Work More Than Once Without Having To Reload Page

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

Solution 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.

functionblammo(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);
}

Solution 2:

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 functionyourFunction(null)
</script>

Solution 3:

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.

Solution 4:

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

<scripttype="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>