CODEWITHSUNDEEP
jqueryselector
Anthony
Anthony

Reputation: 5433

JQuery on() delegate by element instead of string selector

I have a method that looks a little like this:

function turnBlue()
{
    $(this).css('background-color','blue');
}

function fillWithGoodies(obj)
{
    var goodie_box = $("<div id='goodie_box'>Goodies!  Click me and my parent will turn blue.</div>");
    $(obj).append(goodie_box);
    $(goodie_box).on('click', obj, turnBlue);
}

The problem is that when turnBlue() is called, "this" is the goodie_box div, not the obj. (I want the object)

JQuery used to have a .selector() method, but it doesn't look safe to use. http://api.jquery.com/selector/ If it worked, I would have done:

    $(goodie_box).on('click', $(obj).selector(), turnBlue);

Is there a way to do this without changing the architecture?

Note: I know I could do the below instead, but my example here is just a subset of the real code. My question is: Can you somehow get the selector of an object.

    // Don't want to have to do this:
    $(obj).on('click', function() { doSomething(obj) } );

Note #2: Calling parent() isn't a solution for this one: The real code creates a complex dynamic object and the parent could be at any depth.

Upvotes: 0

Views: 388

Answers (3)

Jarvan
Jarvan

Reputation: 1210

If you put a param in on([selector]) and it is not a selector,it will turn to [data],so you can try this:

function turnBlue(e)
{
    $(e.data).css('background-color','blue');
}

function fillWithGoodies(obj)
{
    var goodie_box = $("<div id='goodie_box'>Goodies!  Click me and my parent will turn blue.</div>");
    $(obj).append(goodie_box);
    $(goodie_box).on('click', obj, turnBlue);
}

See passing data in jQuery.on() for more

Upvotes: 0

Marvin Emil Brach
Marvin Emil Brach

Reputation: 3972

There are many selectors, with uncountable possibilities for combinations of CSS classes, pseudo classes and more. I don't believe that it would be practicable to implement it. Your link also says ...property was never a reliable indicator of the selector that could be used...

Further, the selector property is not for using like you may have understand. Have a lokk at the documentation: A selector string to filter the descendants of the selected elements that trigger the event

But there is a possibility to pass data to the handler. Sample from documentation:

function greet(event) { alert("Hello "+event.data.name); }
$("button").on("click", { name: "Karl" }, greet);
$("button").on("click", { name: "Addy" }, greet);

So in your case it will look like following:

function turnBlue(event) {
    $(event.data).css('background-color','blue');
}

function fillWithGoodies(obj) {
    var goodie_box = $("<div id='goodie_box'>Goodies!  Click me and my parent will turn blue.</div>");
    $(obj).append(goodie_box);
    $(goodie_box).on('click', obj, turnBlue);
}

Upvotes: 2

reggaemahn
reggaemahn

Reputation: 6648

Can you do this?

function doSomething(that)
{
    console.log(that);
}

function fillWithGoodies(obj)
{
    $(obj).append("<div id='goodie_box'>Goodies!</div>");
    $(obj).click(function(){
      doSomething(obj);
    });
}

Upvotes: 0

Related Questions