CODEWITHSUNDEEP
javascriptjqueryhtml
ρss
ρss

Reputation: 5315

Retrieving the value of an attribute of a div in jQuery via click()

Sorry for the vague title. I am using jQuery. I have a small scenario in my app and I am stuck.

Problem: I have two functions in my script named as func1 and func2. I want to execute both of these functions when ever an user clicks on the div element and also to access the value of the code attribute in these two functions.

<div id="testId" code="102">Click ME</div> .

Code:

<html>
    <body>
        <div id="testId" code="102">Click ME</div>
        <script type='text/javascript' src='jquery.js'></script>
        <script type='text/javascript' src='script.js'></script>
    </body>
</html>

script.js:

var code1 = "";
var code2 = "";

func1 = function(){
    code1 = $(this).attr('code');
    alert("code1 is "+code1);
}

func2 = function(){
    code2 = $(this).attr('code');
    alert("code2 is "+code2+'2');
}

$('#testId').click(func1, func2);
/*$('#testId').click(function(){
    func1();
    func2();
});*/

I want to access the value of code="102"in my two functions. I tried two ways. First I tried the following snippet:

$('#testId').click(func1, func2);

This only executes the func2. The value of the code attribute is also being accessed by func2. But the func1 is not executing! How to do this?

Then I tried a second way. I am able to execute the both functions when ever an user clicks on the div, by using the following snippet

$('#testId').click(function(){
        func1();
        func2();
    });

but now I am unable to access the value of code attribute and it is undefined! How can I access the value of the code attribute in func1 and func2?

I know I can pass the parameters to func1 and func2 like below and later access the values,

$('#testId').click(function(){
            func1('value of code');
            func2('value of code');
        });

But I am looking for a different solution if possible.

Finally I am looking for a way by which I can execute both of the functions and also have access to the value of the code attribute. Any suggestion will be appreciated!

Upvotes: 0

Views: 63

Answers (3)

Wilfredo P
Wilfredo P

Reputation: 4076

First for all you are ussing the .Click() method so, if you use .click(func1, func2) it hopes that .click( [eventData ], handler ). becouse that only execute the function2 so It's a handlers.

Well you will need execute like:

$('#testId').click(function(){
        func1();
        func2();
    });

If you need get the code, it's much better create a data attribute like:

    <div id="testId" data-code="102">Click ME</div>


    $('#testId').click(function(){
        func1.call(this);
        func2.call(this);
    });

func1 = function(){    console.log($(this).data('code'));
    code1 = $(this).data('code');
    alert("code1 is "+code1);
}

With .call() you send who is calling the function.

Advantage:

Well the .data() attr is better becuse all data that you read you will know that it's aditional paramert, instead only code you maybe don't know where it comes from. unsing the .call keep the method clean of parameters.

Disadvantage

You need to know, What does the call do. and Maybe mixing Vanilla with jQuery. :)

LIVE DEMO

Upvotes: 2

user2321864
user2321864

Reputation: 2307

you can bind your function to the value of this

func1.bind(this)();
func2.bind(this)();

this way when your function tries to access $(this) it will point to the same object as in the click event

Upvotes: 1

Don Boots
Don Boots

Reputation: 2166

This is an issue of scope really. A proper solution can be seen at http://jsfiddle.net/dboots/dhd0dem7/.

In your code, you are referencing $(this) inside func1 and func2. These refer to the actual func1 and func2 scopes and they have no idea what "code" is.

The $(this) inside the click handler, actually refers to the div element you are clicking on so it's fitting to use it there.

In the jsfiddle, we declare code at the global level and set it in the click handler.

var code;

$('#testId').click(function() {
    code = $(this).attr('code');

    func1();
    func2();
});

Then the func1 and func2 functions are able to access it as they see fit.

function func1() {
    alert('func1 code: ' + code);
}

function func2() {
    alert('func2 code: ' + code);
}

Alternate Solution

Pass the code to the individual functions as seen in http://jsfiddle.net/dboots/dhd0dem7/1/.

function func1(code) {
    alert('func1 code: ' + code);
}

function func2(code) {
    alert('func2 code: ' + code);
}

$('#testId').click(function() {
    code = $(this).attr('code');

    func1(code);
    func2(code);
});

Upvotes: 2

Related Questions