Javascript, passing a variable into a click event?

Question

I really can't figure out how I would do this. It's more of a concept question than a code question so I'll just post an example:

object = $('#div');

function doSomething(object) {
    //iterates through a list and creates a UL with items in corresponding to that list.
    $(body).append("<li id='clickme'>Hello world</li>");
}

function createModal(object) {
    //creates modal dialogue.
    doSomething(object);
    //more stuff
}

$('#clickme').live("click", function() {
    //I need access to object (not the object declared at first,
    //the object passed into doSomething) here.

});

Any ideas how I would do such a thing? doSomething would create a set of LIs and have a parameter passed into it. When those LIs the function creates are clicked, they need to interact with the parameter that's passed into doSomething. Is there a way to bind them or something?

Sorry if I didn't make any sense.

Surely by declaring the object variable using var object would allow you to use this variable inside the click function? — Undefined
– Undefined, Commented Jul 9, 2012 at 15:01
cant see your problem, object should be accessible since its global?! — worenga
– worenga, Commented Jul 9, 2012 at 15:05
Why not do return doSomething(object); inside the createModal function, and the inside the #clickme click function, assign it in a way like var clickme_object = createModal(object)? You can then access it by calling the variable. If I understand your question correctly... — ayyp
– ayyp, Commented Jul 9, 2012 at 15:05
It would, but the example I have posted isn't by any means the full code. It's doing some stuff with knockout JS that passes a certain object into createModal. — andy
– andy, Commented Jul 9, 2012 at 15:06

Denys Séguret · Accepted Answer · 2012-07-09 15:03:16Z

5

You can use jquery data function to associate data to your DOM elements. You then can read those data when handling events.

An alternate way, generally not recommended but useful when you build your html in one big pass and don't have an easy access to the DOM elements, and only have strings (or keys), is to add an attribute and retrieve it later using jquery's attr function. Whenever possible I recommend you to use the data function though.

answered Jul 9, 2012 at 15:03

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

Comments

Pointy · Accepted Answer · 2012-07-09 15:05:34Z

2

Store the reference explicitly:

function doSomething(object) {
    //iterates through a list and creates a UL with items in corresponding to that list.
    $(body).append(
      $("<li/>", { id: 'clickme', text: 'Hello world',})
        .data('object', object)
    );
}

Then the event handler can retrieve the reference:

$('#clickme').live("click", function() {
    var object = $(this).data('object');
    // ...
});

Also .live() is deprecated:

$('body').on('click', '#clickme', function() {

is the hip new way to bind delegated event handlers.

answered Jul 9, 2012 at 15:05

Pointy

415k62 gold badges600 silver badges631 bronze badges

Comments

Scott Sauyet · Accepted Answer · 2012-07-09 15:11:16Z

0

object = $('#div');

function doSomething(object) {
    $(body).append("<li id='clickme'>Hello world</li>");
    $('#clickme').click(function(evt) {
        // Here you have access to `object`
    });
}

function createModal(object) {
    //creates modal dialogue.
    doSomething(object);
    //more stuff
}

This might not be enough. If you are creating multiple links rather than just the single one with id clickme you might have to find a different selector to use when you attach the click-handler. But if you nest the function that way, you have access to the parameter object that was used when the click-handler was created.

answered Jul 9, 2012 at 15:11

Scott Sauyet

50.9k5 gold badges57 silver badges111 bronze badges

Comments

Pablo Romeo · Accepted Answer · 2012-07-09 15:14:23Z

0

Another option would be to declare and attach the handler in a location where the parameter would be in scope, through closures (not tested):

function doSomething(object) {
    $(body).append("<li id='clickme'>Hello world</li>").click(function() {
        //object is accessible here
    });
}

answered Jul 9, 2012 at 15:14

Pablo Romeo

11.4k2 gold badges32 silver badges60 bronze badges

Collectives™ on Stack Overflow

Javascript, passing a variable into a click event?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related