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>

Answer 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);
}

Answer 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 function
yourFunction(null)
</script>

Answer 3

如果你想让任何一块js运行多次，把整个东西放在一个函数中，然后在其中使用setTimeOut()来调用它自己。

Answer 4

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>