dynamic variable in event bind

Question

I'm having a problem binding a dynamic event in jQuery. What I want to achieve is to have an event that acts on a variable that has previously been set. For example I have

someFunc = function (form_id)
{
    $("input").bind("focus", function ()
    {
        $("#"+form_id).css({"border":"1px solid red"});
    });
}

someFunc("edit_form");
somefunc("add_form");

Now this is a large simplification of what I'm looking to do but the dynamic nature of a variable when binding is what I need. The problem here is that essentially I want jQuery to execute on whatever "form_id" was when the bind was applied but instead it will execute on whatever the "form_id" is when the focus is triggered.

I understand why this occurs, my question is how can I achieve the functionality I'm looking for. (Again form here is just an example, not an actual bit of functionality).

Edit 1:

This is probably a better example of what I'm trying to achieve:

Dog.prototype = {
    name: "Dog",

    bind_function : function ()
    {
        name = this.name;

        $(name+"_edit_form input[name='something']").bind("focus", function ()
        {
            console.log(name);
        })
    }
}

function Dog() {
    this.breed = "Chihuaha";
}

Rover = new Dog();
Rover.bind_function();

Fido = new Dog();
Fido.bind_function();

Now I want focus to produce a console log of that particular dogs name, but at present it will just console log the last dog's name?

Your second example is even more confusing. Why this.breed? Also your always selecting $('Dog_edit_form input[.... this seems wrong. — Gary Green
– Gary Green, Commented May 3, 2011 at 12:07
Sorry it was a particularly difficult thing to word, found the answer anyway. Posting now. — Dormouse
– Dormouse, Commented May 3, 2011 at 12:11

user447356 · Accepted Answer · 2011-05-03 11:32:42Z

0

I think this is what you're after?

$("form").each(function() {
    var id = $(this).attr("id");
    $("input", $(this)).bind("focus", function ()
    {
        var border = "";
        switch (id) {
            case "edit_form":
                border = "1px solid red";
                break;
            case "add_form":
                border = "1px solid blue";
                break;
        }

        $(this).css( { border: border });
    });
});

Although not using your function, it will assign different CSS based on the focused element form ID.

Live test case.

answered May 3, 2011 at 11:32

user447356

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

1 Comment

Dormouse Over a year ago

Thanks but I don't think that's what I'm looking for, edited to add a better (hopefully clearer) example

Dormouse · Accepted Answer · 2011-05-03 12:13:17Z

0

I was looking for eventData to pass variables at the time of binding rather than execution. About halfway down the jQuery documentation page for bind():

http://api.jquery.com/bind/

answered May 3, 2011 at 12:13

Dormouse

5,1781 gold badge28 silver badges42 bronze badges

2 Comments

Gary Green Over a year ago

In your first example it should work correctly, and it does: jsfiddle.net/JRRuZ (it acts seperately on both elements, not on the last used element as you explained) -- I'm glad you found your answer, though I suspect your usage isn't truly the best way to do what your doing.

user447356 Over a year ago

Cheers, yet another new thing I learn today - your understanding of this might be slightly wrong but as I'm not 100% sure myself I can't point out how exactly. If it works, it works!

Collectives™ on Stack Overflow

dynamic variable in event bind

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related