JS click function doesn't respond

Question

Please take a look at this page. I wrote click functions for each button (#signup_switch_btn and #signin_switch_btn, the big red and green ones) on this page but no one responds. http://tural.no-ip.org/ - Page in action. JS file - first.js

Js looks like this

$(document).ready(function () {
    $('#signup_form').get(0).reset()
    var counter = 0,
signin = $("#signin_switch_btn"), 
signup = $("#signup_switch_btn"), 
signin_f = $("#signin_form"), 
holder = $("#holder"), 
signup_f = $("#signup_form"), 
f_container = $("#form_container");


    function beforeAnimation() {
        signin.removeClass('default_radius').addClass('right_radius');
        signup.removeClass('default_radius').addClass('left_radius');
        $("#container").animate({
            marginTop: "-=150px",
        }, 500);
    }


    $("#signup_switch_btn").click(function () {

        if (counter === 0) {
            beforeAnimation();
            holder.css('backgroundColor', '#f91c06').height(275).slideDown("slow");
            f_container.show();
            signup_f.stop(true, true).fadeIn(1200);
        } else {
            holder.stop(true, true).animate({
                height:"275",
                backgroundColor:"#f91c06"
            },1000);
            signin_f.stop(true, true).fadeOut(1000);
            f_container.stop(true, true).animate({
                height:"260"
            },1000);
            signup_f.stop(true, true).fadeIn(1000);
        }
        counter++;
    });

    $("#signin_switch_btn").click(function () {
        if (counter === 0) {
            beforeAnimation();
            holder.css('backgroundColor', '#5bd300').height(125).slideDown("slow");
            f_container.show();
            signin_f.stop().fadeIn(1200);
        } else {
            holder.stop(true, true).animate({
                height:"125",
                backgroundColor:"#5bd300"
            },1000);
            signup_f.stop(true, true).fadeOut(800);
            f_container.stop(true, true).animate({
                height:"110"
            },1000);
            signin_f.stop(true, true).fadeIn(1200);

        }

        counter++;
    });

    $('input[type="text"],input[type="password"]').focus(function () {
        labelFocus(this, true);
    }).blur(function () {
        labelFocus(this, false);
    });

    function labelFocus(el, focused) {
        var name = $(el).attr('name');
        $('label[for="' + name + '"]').toggleClass('focused', !! focused);
    }
    $('input[type="text"],input[type="password"]').keypress(function () {
        $(this).attr('class', 'valid');
    }); 

});

mrtsherman · Accepted Answer · 2011-11-14 22:59:45Z

3

No element with an id of signup_switch_btn exists in that page. Therefore the following binding will never work:

$("#signup_switch_btn").click

answered Nov 14, 2011 at 22:59

mrtsherman

40k23 gold badges90 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tural Ali Over a year ago

the backend is php, I changed php file. Is tere any chance that the php cache didn't update yet?

mrtsherman Over a year ago

Yes, that is certainly possible. Or possibly the browser is caching. Try using ctrl+f5 to force a full page refresh.

Tural Ali Over a year ago

please refresh the page and press on red button. What is that?

Strelok Over a year ago

That's a broken button. The red button's href is empty, it just looks like href, change it to href="#". Once I did that in Chrome Dev Tools it started working.

Strelok · Accepted Answer · 2011-11-14 23:02:34Z

1

There are no buttons with id *signin_switch_btn* and *signup_switch_btn*. Your button's ids are signin and signup.

answered Nov 14, 2011 at 23:02

Strelok

51.7k9 gold badges106 silver badges118 bronze badges

2 Comments

Tural Ali Over a year ago

That's how php side looks

<div id="buttons"> <a href="" id="signup_switch_btn" class="button red gradient default_radius">Qeydiyyatdan keç</a> <a href="#" id="signin_switch_btn" class="button green gradient default_radius">Daxil ol!</a> </div>

. Is tere any chance that the php cache didn't update yet?

Tural Ali Over a year ago

please refresh the page and press on red button. What is that?

Justin Thomas · Accepted Answer · 2011-11-14 23:00:54Z

1

Your id on the html page are signing and signup. Change $('#signup_switch_btn') to $('#signup')

answered Nov 14, 2011 at 23:00

Justin Thomas

5,8473 gold badges44 silver badges63 bronze badges

2 Comments

Tural Ali Over a year ago

That's how php side looks

<div id="buttons"> <a href="" id="signup_switch_btn" class="button red gradient default_radius">Qeydiyyatdan keç</a> <a href="#" id="signin_switch_btn" class="button green gradient default_radius">Daxil ol!</a> </div>

. Is tere any chance that the php cache didn't update yet?

Tural Ali Over a year ago

please refresh the page and press on red button. What is that?

Collectives™ on Stack Overflow

JS click function doesn't respond

3 Answers 3

4 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related