CODEWITHSUNDEEP
javascriptjquery
andy
andy

Reputation: 2399

Javascript, passing a variable into a click event?

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.

Upvotes: 0

Views: 776

Answers (4)

Pablo Romeo
Pablo Romeo

Reputation: 11396

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
    });
}

Upvotes: 0

Scott Sauyet
Scott Sauyet

Reputation: 50787

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.

Upvotes: 0

Pointy
Pointy

Reputation: 413717

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.

Upvotes: 2

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382150

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.

Upvotes: 5

Related Questions