jQuery: .click() and execute function

Question

Since few hours I tried to make a script which will show a div when the window.location.hash is set up. When the page is ready the script works but when I try to call it with jQuery event .click() it doesnt work.

The code:

var bodyHeight = $('body').height();
$(asd);
function asd() {
locationHash = window.location.hash.replace(/^#!/, '');
if(locationHash != "") {
    $('div#bgLayer').css({
        'height': bodyHeight,
        'display': 'block'
    });
    $('div#feedBack').css('display', 'block');
    $('div#bgLayer, div#feedBackRight').click(function() {
        var clientName = "";
        var clientEmail = "";
        var clientWebsite = "";
        var clientImage = "";
        var clientFeedBack = "";
        $('div#bgLayer').css('display', 'none');
        $('div#feedBack').css('display', 'none');
        $('div#feedBacks').css('display', 'block');
        $('div#feedBackForm').css('display', 'none');
        $('a#showFeedBacks').css('font-weight', 'bold');
        $('h3#clientsAboutUs').css('display', 'inline-block');
        $('h3#addFeedBackAboutUs').css('display', 'none');
        $('div.pages').css('display', 'block');
        $('a#addFeedBack').css('font-weight', 'normal');
        window.location.hash = '!';
    });
    if(locationHash == 'addFeedBack') {
        $('div#feedBacks').css('display', 'none');
        $('h3#clientsAboutUs').css('display', 'none');
        $('h3#addFeedBackAboutUs').css('display', 'inline-block');
        $('div.pages').css('display', 'none');
        $('div#feedBackForm').css('display', 'block');
        $('a#showFeedBacks').css('font-weight', 'normal');
        $('a#addFeedBack').css('font-weight', 'bold');
        $('input#submitFeedBack').attr('disabled', 'disabled');
    }
    else if(locationHash == 'showFeedBacks') {
        $('div#feedBackForm').css('display', 'none');
        $('h3#clientsAboutUs').css('display', 'inline-block');
        $('h3#addFeedBackAboutUs').css('display', 'none');
        $('div.pages').css('display', 'block');
        $('div#feedBacks').css('display', 'block');
        $('a#addFeedBack').css('font-weight', 'normal');
        $('a#showFeedBacks').css('font-weight', 'bold');
    }
}
}
$('#addFeedBack-page').click(asd);

The #addFeedBack-page is:

<a href="#!addFeedBack" id="addFeedBack-page" class="buttons" title="Click me">Click me</a>

So how to make it right?

Best regards, George!

what does the second line of your script accomplish? i have never seen that. — jbabey
– jbabey, Commented Mar 8, 2012 at 4:40

GregL · Accepted Answer · 2012-03-08 04:12:32Z

1

You want to bind the click handler inside the document.ready event.

So change your code to:

var bodyHeight = $('body').height();
$(function () {
     asd();
     $('#addFeedBack-page').click(asd);
});

function asd() {
    // same as you have it...
}

answered Mar 8, 2012 at 4:12

GregL

38.2k8 gold badges65 silver badges68 bronze badges

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

2 Comments

user546774 Over a year ago

My code is: "$(document).ready(function() { var bodyHeight = $('body').height(); $(asd); function asd() {...} $('#addFeedBack-page').click(asd);"

GregL Over a year ago

@T0m3kk $(<function>) is the same as $(document).ready(<function>), so your $(asd) code actually binds that function to run on document.ready, which has already happened, so it fires straight away.

Kanishka Panamaldeniya · Accepted Answer · 2012-03-08 04:21:58Z

var bodyHeight = $('body').height();
$(document).ready(function () {
     asd();
     $('#addFeedBack-page').click(function(){

        asd();

     });
});

function asd() {
locationHash = window.location.hash.replace(/^#!/, '');
if(locationHash != "") {
    $('div#bgLayer').css({
        'height': bodyHeight,
        'display': 'block'
    });
    $('div#feedBack').css('display', 'block');
    $('div#bgLayer, div#feedBackRight').click(function() {
        var clientName = "";
        var clientEmail = "";
        var clientWebsite = "";
        var clientImage = "";
        var clientFeedBack = "";
        $('div#bgLayer').css('display', 'none');
        $('div#feedBack').css('display', 'none');
        $('div#feedBacks').css('display', 'block');
        $('div#feedBackForm').css('display', 'none');
        $('a#showFeedBacks').css('font-weight', 'bold');
        $('h3#clientsAboutUs').css('display', 'inline-block');
        $('h3#addFeedBackAboutUs').css('display', 'none');
        $('div.pages').css('display', 'block');
        $('a#addFeedBack').css('font-weight', 'normal');
        window.location.hash = '!';
    });
    if(locationHash == 'addFeedBack') {
        $('div#feedBacks').css('display', 'none');
        $('h3#clientsAboutUs').css('display', 'none');
        $('h3#addFeedBackAboutUs').css('display', 'inline-block');
        $('div.pages').css('display', 'none');
        $('div#feedBackForm').css('display', 'block');
        $('a#showFeedBacks').css('font-weight', 'normal');
        $('a#addFeedBack').css('font-weight', 'bold');
        $('input#submitFeedBack').attr('disabled', 'disabled');
    }
    else if(locationHash == 'showFeedBacks') {
        $('div#feedBackForm').css('display', 'none');
        $('h3#clientsAboutUs').css('display', 'inline-block');
        $('h3#addFeedBackAboutUs').css('display', 'none');
        $('div.pages').css('display', 'block');
        $('div#feedBacks').css('display', 'block');
        $('a#addFeedBack').css('font-weight', 'normal');
        $('a#showFeedBacks').css('font-weight', 'bold');
    }
}
}

AhHao Liow · Accepted Answer · 2012-03-08 04:22:42Z

0

if you change the html of your current page by using jquery,

normally i would suggest you to use

jQuery(document).ready(function () {
   $('#addFeedBack-page').live("click",function(){

   //action goes here

   });
});

answered Mar 8, 2012 at 4:22

AhHao Liow

111 bronze badge

Collectives™ on Stack Overflow

jQuery: .click() and execute function

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related