jQuery access to this event in new object

Question

I want to get access to the data-global-id value in the following markup and I am not sure how to do this due to scoping.

For example:

<div data-global-id="168" class="remove-as-favorite">remove as favorite</div>

$('.remove-as-favorite').on('click',function(){
  var global_id=$(this).data('global-id');
  // this works
  alert('here i am in something: ' + global_id);
  // this doesn't work
  event_handler.remove_as_favorite(); 
});


// want to access the data-global-id value in here; how to get access to this?
event_handler={
remove_as_favorite: function(){
    // how to get access to this here; assuming this refers to event_handler 
    var global_id=$(this).data('global-id');
    alert("here i am global_id:" + global_id);
  }
}

thx

** edit 1 ** enter image description here

score 0 · Accepted Answer · edited May 23 '17 at 10:32

0

Try this bruv: working demo with global_id http://jsfiddle.net/HK55Q/8/ or http://jsfiddle.net/HK55Q/11/

In the code merely changing the declaration of global id outside the local function like this var global_id = "";

further the code should explain better,

Good read:) How to store a global value (not necessarily a global variable) in jQuery?

hope it helps, lemme know if I missed anything

code

var global_id = ""; //<=== See here the global_id variable is outside your click and now you can bind it and can use it again.

$('.remove-as-favorite').on('click',function(){
  global_id=$(this).data('global-id'); //<== Do not redeclare it using var global_id
  // this works
  alert('here i am in something: ' + global_id);
  // this doesn't work
  event_handler.remove_as_favorite(); 
});


// want to access the data-global-id value in here; how to get access to this?
event_handler={
remove_as_favorite: function(){
    // how to get access to this here; assuming this refers to event_handler 
    var global_id=$(this).data('global-id');
    alert("here i am global_id:" + global_id);
  }
}

edited May 23 '17 at 10:32

Community

1
1

answered Jun 30 '12 at 02:50

Tats_innit

33,991
10
71
77

working through this - not working right nwo but sure that's prob something wrong I'm doing – timpone Jun 30 '12 at 02:59
@timpone Glad I can help `:)` feel free to flick me demo I can help you out further if need be, – Tats_innit Jun 30 '12 at 03:00
created this jsfiddle - doesn't seem to be working var http://jsfiddle.net/HK55Q/3/ – timpone Jun 30 '12 at 03:11
Hiya @timpone cool so the global variable is working fine, but the `data('global_id')` element is nothing i.e. undefined see here and see alerts `:)` **working demo** http://jsfiddle.net/HK55Q/8/ **also PLease note** you defined `var global_id` twice see my code above :) the alert comment will guide you through. – Tats_innit Jun 30 '12 at 03:16
so ideally I'd like to really only be accessing the global_id once - like in the even_handler object. There's a huge mess of getting these values in these event handlers and want to try to separate the on event calls from the getting of those values. Maybe just not doable – timpone Jun 30 '12 at 03:31
@timpone hmmm, `:)` not sure what do you mean, but flick me jsfiddle I will help you out further, also above demo should help you to understand how you can use global variable. lemme knw how it goes – Tats_innit Jun 30 '12 at 03:32
so ideally, I'd like to get somethign like this: http://jsfiddle.net/sFEXy/1/ so that we could just separte the listing of the actual on evetns from the logic – timpone Jun 30 '12 at 03:37
@timpone okies seems yo don't need global variable and you just need 2 separate variables then? – Tats_innit Jun 30 '12 at 03:39
well, I think i just need to figure out how to get access to this within the second function. I think the creation of the event_handler object is the source of the problem. I am pretty sure we ahve soem working code that is very similar to this. ugh ... – timpone Jun 30 '12 at 03:42
@timpone hmmm have you seen this demo: http://jsfiddle.net/HK55Q/8/ see the alert: `alert("Before change global_id: == >" + global_id);` gets the correct value in error handler function? `:P` – Tats_innit Jun 30 '12 at 03:48
so the one I would want would be #3 but that is undefined for me. Will add screenshot as edit – timpone Jun 30 '12 at 03:56
lol @timpone read my comments carefully in here: http://jsfiddle.net/HK55Q/9/ you are using your `var` incorrectly in #3 i.e. defining `var global_id` "twice"! – Tats_innit Jun 30 '12 at 04:05
so i updated fiddle here. http://jsfiddle.net/HK55Q/10/ This is kinda what I want. Maybe I'm not getting what you're saying. thx for your patience. – timpone Jun 30 '12 at 04:16
@timpone **FIXED :)** see here: http://jsfiddle.net/HK55Q/11/ updating the post, this will help you out rest code will make it clear for you, – Tats_innit Jun 30 '12 at 04:20

score 0 · Answer 2 · answered Jun 30 '12 at 03:04

You could do one of a couple things. The simplest I can see is to pass global_id as an argument into the remove_as_favorite function, so that it would look like this:

$('.remove-as-favorite').on('click',function(){
  var global_id=$(this).data('global-id');
  event_handler.remove_as_favorite(global_id); 
});

// want to access the data-global-id value in here; how to get access to this?
event_handler={
remove_as_favorite: function(global_id){
    alert("here i am global_id:" + global_id);

} }

The other way is to use either the "call" or "apply" functions.

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/Call

$('.remove-as-favorite').on('click',function(){
  var global_id=$(this).data('global-id');
  event_handler.remove_as_favorite.call(this); 
});

Very cross browser... the .call method was added in JavaScript 1.3, it was introduced in Netscape Navigator 4 and IE 4. — Makotosan, Jul 01 '12 at 01:35

score 0 · Answer 3 · answered Jun 30 '12 at 06:09

A simpler example would be to use call as follows:

$(function(){
    $('.remove-as-favorite').on('click',function(){
        var global_id=$(this).data('global-id');
        alert('here i am in something: ' + global_id);
        event_handler.remove_as_favorite.call({global_id:global_id}); 
    });


    event_handler = {
        remove_as_favorite: function() {
            alert("here i am global_id:" + this.global_id);
        }
    }
});

And call is a javascript function, and is compatible with all the browsers, which support javascript ofcourse ;)

Check the fiddle at: http://jsfiddle.net/nTq97/

we have a set of functions following this pattern. The issue is we want to have a set of event-captures in a single file (like a routes.rb in a rails app) where we can just specify these captures but not have the actual getting of the variables here. In my opinion, it would just be a lot cleaner. Agreed that this would work. Would probably need to put into a args hash for more than one variable. REALLY REALLY want to figure out a clean way to do this. — timpone, Jun 30 '12 at 23:21

jQuery access to this event in new object

3 Answers3