CODEWITHSUNDEEP
javascriptjqueryhtmljquery-selectors
Vincent Duprez
Vincent Duprez

Reputation: 3892

Select element with title in Jquery

How can I apply something to all elements now and in the future which have a title attribute set?

The reason why I want to achieve this is simple: I have a footer in a webapp where, like many apps, I'd like to have some information written on hovering some elements. I'd like to set this information in the title attribute of the elements I want to display information for.

So every element with a title should trigger a function on hover. Even elements that are added dynamically.

I found this to have something work on mouse enter+leave that is suposed to work for added elements:

$(document).on(
{
    mouseenter: function() 
    {
        //stuff to do on mouseover
    },
    mouseleave: function()
    {
        //stuff to do on mouseleave
    }
}
, "*[special-selector]");

what's the special selector supposed to be?

Secondary question: How can I acces the $(this).attr('title') attribute from within the scope of these 2 anonymous functions?

Any Idea? or maybe better solutions? I want too keep the html as simple as possible and avoid using the onmouseover attributes within the elements as there are LOT of them..

Upvotes: 1

Views: 149

Answers (1)

David Thomas
David Thomas

Reputation: 253318

Target an element with the attribute selector:

$(document).on(
{
    mouseenter: function(e)
    {
        //stuff to do on mouseover
        var domNode = this,
            $object = $(domNode),
            title = domNode.title;
        $object.addClass('hover');
        console.log(title);
    },
    mouseleave: function(e)
    {
        //stuff to do on mouseleave
        var domNode = this,
            $object = $(domNode),
            title = domNode.title;
        $object.removeClass('hover');
        console.log(title);
    }
}
, "[title]");

(Simple) JS Fiddle demo.

References:

Upvotes: 2

Related Questions