CODEWITHSUNDEEP
jqueryonclicktitle
Solomon Closson
Solomon Closson

Reputation: 6217

jQuery Need to reattach title to element onClick

Am using the following jQuery code:

$(document).ready(function() {
    $('a[title]').mouseover(function () {
        $this = $(this);
        $this.data('title', $this.attr('title'));
        // Using null here wouldn't work in IE, but empty string will work just fine.
        $this.attr('title', '');
    }).mouseout(function () {
        $this = $(this);
        $this.attr('title', $this.data('title'));
    });
    $('[data-title]').click(function(e) {
        e.preventDefault();
        $this = $(this);
        $this.attr('title', $this.data('title'));
        $this.removeAttr('data-title');
        $(this).click();
    });
});

The reason for this code is to eliminate the title attribute from <a> tags only when it is hovered on, because I happen to need the title attribute for this plugin called mediaboxadvanced because it uses the title attribute as the caption for image popups, which is what I want. The reason I'm storing the title attribute inside of the data-title on hover, is because I don't want the HTML markup to show in the title and unable to find a solution for removing this HTML markup (which is ugly to see) that gets displayed via a tooltip (from the title attribute). So, with that said, I don't think we need a tooltip at all, but I am having trouble reassigning the title attribute back from the data-title attribute onclick.

Actually, it would be sweet if we could somehow assign it back to the <a> tag just before the click event occurs, which is what I am trying to do in the code above. But for some reason, the title attribute isn't being assigned here...

Upvotes: 1

Views: 195

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388406

There are two points

  1. There is no data-title attribute associated with the a elements, you have only title attribute. So you need to change the selector
  2. You are firing the on-click handler within the click handler with triggers a indefinite recursion causing the Maximum recursion depth exceeded now error

Update:
There is no need for all these things, the plugin gives us facility to extend it using a linkmapper.

At the bottom of the plugin file you have

Mediabox.scanPage = function() {
//  if (Browser.Platform.ios && !(navigator.userAgent.match(/iPad/i))) return;  // this quits the process if the visitor is using a non-iPad iOS device (iPhone or iPod Touch)
//  $$('#mb_').each(function(hide) { hide.set('display', 'none'); });
    var links = $$("a").filter(function(el) {
        return el.rel && el.rel.test(/^lightbox/i);
    });
//  $$(links).mediabox({/* Put custom options here */}, null, function(el) {
    links.mediabox({/* Put custom options here */}, null, function(el) {
        var rel0 = this.rel.replace(/[\[\]|]/gi," ");
        var relsize = rel0.split(" ");
//      return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1]));

        var relsearch = "\\["+relsize[1]+"[ \\]]";
        var relregexp = new RegExp(relsearch);
        return (this == el) || ((this.rel.length > 8) && el.rel.match(relregexp));
    });
};

Change it to

Mediabox.scanPage = function() {
//  if (Browser.Platform.ios && !(navigator.userAgent.match(/iPad/i))) return;  // this quits the process if the visitor is using a non-iPad iOS device (iPhone or iPod Touch)
//  $$('#mb_').each(function(hide) { hide.set('display', 'none'); });
    var links = $$("a").filter(function(el) {
        return el.rel && el.rel.test(/^lightbox/i);
    });
//  $$(links).mediabox({/* Put custom options here */}, null, function(el) {
    links.mediabox({/* Put custom options here */}, function(el) {
    //This is the linkmapper function
        elrel = el.rel.split(/[\[\]]/);
        elrel = elrel[1];
        return [el.get('href'), $(el).data('title'), elrel];    // thanks to Dušan Medlín for figuring out the URL bug!
    }, function(el) {
        var rel0 = this.rel.replace(/[\[\]|]/gi," ");
        var relsize = rel0.split(" ");
//      return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1]));

        var relsearch = "\\["+relsize[1]+"[ \\]]";
        var relregexp = new RegExp(relsearch);
        return (this == el) || ((this.rel.length > 8) && el.rel.match(relregexp));
    });
};

and then instead of using title to specify the title use data-title attribute in the markup

Demo: Plunker

Upvotes: 1

Fallexe
Fallexe

Reputation: 596

Try changing your selector from $('[data-title]') to $('a[title]').

Upvotes: 0

Related Questions