$('#id').click function not working

It works perfectly on localhost but it doesn't work on the server.

When I click on the 'Start Free Trial' anchor text, it doesn't work. The alert doesn't show up. What could be the problem?

<script>
 $(function() {
        $('#activator3').click(function(){
            alert('huan');
            $('#overlays3').fadeIn('fast',function(){
                $('#boxs3').animate({'top':'80px'},500);
            });
        });
        $('#boxclose3').click(function(){
            $('#boxs3').animate({'top':'-500px'},500,function(){
                $('#overlays3').fadeOut('fast');
            });
         });

    });
</script>

<a href="javascript:void(0)" style="" class="activator3" id="activator3">
<div id="indexpack2" style="">Start Free Trial</div>
</a>

Here is the Fiddle


Note

I have tried:

  1. adding document.ready() to wrap the script - not working

  2. $('#activator3').on('click', function(){}); - not working

Any help would be appreciated.

Answers 1

  • In your Fiddle, you forgot to add jQuery, and you put your JavaScript code at the wrong place.

    If you fix those two things, your code works just fine!


    Demo

    $(function() {
        $('#activator3').click(function(){
            alert('huan');
            $('#overlays3').fadeIn('fast',function(){
                $('#boxs3').animate({'top':'80px'},500);
            });
        });
        $('#boxclose3').click(function(){
            $('#boxs3').animate({'top':'-500px'},500,function(){
                $('#overlays3').fadeOut('fast');
            });
        });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <a href="javascript:void(0)" style="" class="activator3" id="activator3"><div id="indexpack2" style="">Start Free Trial</div></a>   				

    (See also the fixed Fiddle)


Related Articles