sharer.js Issue with ajax loaded content

[optimusvish]

@ellisonleao Can you help me out? I'm using this script on my page but it's not working on ajax loaded page.

[optimusvish]

@ellisonleao I'm using one div and loading the content from another page to this div so the script is not working. If i use directly in a page it'll work but not on ajax loaded content.

[ellisonleao]

Do you have a piece of code so we can test here?

[romettm]

`/**

• @preserve
• Sharer.js
• @description Create your own social share buttons
• @version 0.2.16
• @author Ellison Leao ellisonleao@gmail.com
• @license GPLv3

• */

(function () { 'use strict'; /**

• @constructor */ var Sharer = function(elem) { this.elem = elem; };

  Sharer.prototype = { constructor: Sharer, /**

  • @function getValue
  • @description Helper to get the attribute of a DOM element
  • @param {String} attr DOM element attribute

  • @returns {String|Empty} returns the attr value or empty string */ getValue: function(attr) { var val = this.elem.getAttribute('data-' + attr); return (val === undefined || val === null) ? false : val; },

    /**

  • @event share
  • @description Main share event. Will pop a window or redirect to a link

  • based on the data-sharer attribute. */ share: function() { var sharer = this.getValue('sharer').toLowerCase(), sharers = { facebook: { shareUrl: 'https://www.facebook.com/sharer/sharer.php', params: {u: this.getValue('url')} }, googleplus: { shareUrl: 'https://plus.google.com/share', params: {url: this.getValue('url')} }, linkedin: { shareUrl: 'https://www.linkedin.com/shareArticle', params: { url: this.getValue('url'), mini: true } }, twitter: { shareUrl: 'https://twitter.com/intent/tweet/', params: { text: this.getValue('title'), url: this.getValue('url'), hashtags: this.getValue('hashtags'), via: this.getValue('via') } }, email: { shareUrl: 'mailto:' + this.getValue('to'), params: { subject: this.getValue('subject'), body: this.getValue('title') + '\n' + this.getValue('url') }, isLink: true }, whatsapp: { shareUrl: 'whatsapp://send', params: { text: this.getValue('title') + ' ' + this.getValue('url') }, isLink: true }, telegram: { shareUrl: 'tg://msg_url', params: { text: this.getValue('title') + ' ' + this.getValue('url') }, isLink: true }, viber: { shareUrl: 'viber://forward', params: { text: this.getValue('title') + ' ' + this.getValue('url') }, isLink: true }, line: { shareUrl: 'http://line.me/R/msg/text/?' + encodeURIComponent(this.getValue('title') + ' ' + this.getValue('url')), isLink: true }, pinterest: { shareUrl: 'https://www.pinterest.com/pin/create/button/', params: { url: this.getValue('url'), media: this.getValue('image'), description: this.getValue('description') } }, tumblr: { shareUrl: 'http://tumblr.com/widgets/share/tool', params: { canonicalUrl: this.getValue('url'), content: this.getValue('url'), posttype: 'link', title: this.getValue('title'), caption: this.getValue('caption'), tags: this.getValue('tags') } }, hackernews: { shareUrl: 'https://news.ycombinator.com/submitlink', params: { u: this.getValue('url'), t: this.getValue('title') } }, reddit: { shareUrl: 'https://www.reddit.com/submit', params: {'url': this.getValue('url')} }, vk: { shareUrl: 'http://vk.com/share.php', params: { url: this.getValue('url'), title: this.getValue('title'), description: this.getValue('caption'), image: this.getValue('image') } }, xing: { shareUrl: 'https://www.xing.com/app/user', params: { 'op': 'share', 'url': this.getValue('url'), 'title': this.getValue('title') } }, buffer: { shareUrl: 'https://buffer.com/add', params: { url: this.getValue('url'), title: this.getValue('title'), via: this.getValue('via'), picture: this.getValue('picture') } }, instapaper: { shareUrl: 'http://www.instapaper.com/edit', params: { url: this.getValue('url'), title: this.getValue('title'), description: this.getValue('description') } }, pocket: { shareUrl: 'https://getpocket.com/save', params: { url: this.getValue('url') } }, digg: { shareUrl: 'http://www.digg.com/submit', params: { url: this.getValue('url') } }, stumbleupon: { shareUrl: 'http://www.stumbleupon.com/submit', params: { url: this.getValue('url'), title: this.getValue('title') } }, flipboard: { shareUrl: 'https://share.flipboard.com/bookmarklet/popout', params: { v: 2, title: this.getValue('title'), url: this.getValue('url'), t: Date.now() } }, weibo: { shareUrl: 'http://service.weibo.com/share/share.php', params: { url: this.getValue('url'), title: this.getValue('title'), pic: this.getValue('image'), appkey: this.getValue('appkey'), ralateUid: this.getValue('ralateuid'), language: 'zh_cn' } }, renren: { shareUrl: 'http://share.renren.com/share/buttonshare', params: { link: this.getValue('url') } }, myspace: { shareUrl: 'https://myspace.com/post', params: { u: this.getValue('url'), t: this.getValue('title'), c: this.getValue('description') } }, blogger: { shareUrl: 'https://www.blogger.com/blog-this.g', params: { u: this.getValue('url'), n: this.getValue('title'), t: this.getValue('description') } }, baidu: { shareUrl: 'http://cang.baidu.com/do/add', params: { it: this.getValue('title'), iu: this.getValue('url') } }, douban: { shareUrl: 'https://www.douban.com/share/service', params: { name: this.getValue('title'), href: this.getValue('url'), image: this.getValue('image') } }, okru: { shareUrl: 'https://connect.ok.ru/dk', params: { 'st.cmd': 'WidgetSharePreview', 'st.shareUrl': this.getValue('url'), 'title': this.getValue('title') } } }, s = sharers[sharer];

    // custom popups sizes
    if (s) {
        s.width = this.getValue('width');
        s.height = this.getValue('height');
    }
    return s !== undefined ? this.urlSharer(s) : false;

    }, /**

  • @event urlSharer

  • @param {Object} sharer */ urlSharer: function(sharer) { var p = sharer.params || {}, keys = Object.keys(p), i, str = keys.length > 0 ? '?' : ''; for (i = 0; i < keys.length; i++) { if (str !== '?') { str += '&'; } if (p[keys[i]]) { str += keys[i] + '=' + encodeURIComponent(p[keys[i]]); } } sharer.shareUrl += str;

    if (!sharer.isLink) {
        var popWidth = sharer.width || 600,
            popHeight = sharer.height || 480,
            left = window.innerWidth / 2 - popWidth / 2 + window.screenX,
            top = window.innerHeight / 2 - popHeight / 2 + window.screenY,
            popParams = 'scrollbars=no, width=' + popWidth + ', height=' + popHeight + ', top=' + top + ', left=' + left,
            newWindow = window.open(sharer.shareUrl, '', popParams);
    
        if (window.focus) {
            newWindow.focus();
        }
    } else {
        window.location.href = sharer.shareUrl;
    }

    } };

  /**

• Creates a click event on every DOM element which has the sharer class */ window.installSharer = function() { var elems = document.querySelectorAll('.sharer'), i, l = elems.length;

  function addShare(elem) {
      var target = elem.currentTarget || elem.srcElement;
      var sharer = new Sharer(target);
      sharer.share();
  }
  
  for (i = 0; i < l ; i++) {
      elems[i].addEventListener('click', addShare);
  }

  }; window.addEventListener('load', window.installSharer); })(); `

Call installSharer() after ajax content is loaded

[optimusvish]

@ellisonleao @romettm sorry guys I'm out of town for sometime. Anyway thanks for your replies. Actually I fixed the issue that day only. Thanks any way. and @ellisonleao thank you so much for the script (sharer.js) file. Using that I've written this code and I didn't include your js file. This is the code I used: $(document).on("click", '.sharer', function() { var sharer = $(this).attr("data-sharer"); var text = $(this).attr("data-title"); var url = $(this).attr("data-url"); var hashtags = $(this).attr("data-hashtags"); var image = ''; var description = text; var to = ''; if(sharer == 'whatsapp') { var message = encodeURIComponent(text) + " - " + encodeURIComponent(url); var location = "whatsapp://send?text=" + message; } else if(sharer == 'facebook') { var location = "https://www.facebook.com/sharer/sharer.php?u=" + url; } else if(sharer == 'twitter') { var location = "https://twitter.com/intent/tweet/?text="+text+"&url="+url+"&hashtags="+hashtags; } else if(sharer == 'googleplus') { var location = "https://plus.google.com/share?url="+url; } else if(sharer == 'linkedin') { var location = "https://www.linkedin.com/shareArticle?url="+url+'&mini=!0'; } else if(sharer == 'telegram') { var location = "tg://msg_url?text="+text+" "+url; } else if(sharer == 'pinterest') { var location = "https://www.pinterest.com/pin/create/button/?url="+url+"&media="+image+'&description='+description; } else if(sharer == 'email') { var location = "mailto:"+to+"&subject="+text+"&body="+text+"\n"+url; } window.location.href = location; });

[ellisonleao]

yea, the problem is that the bindings are added on window load, not click. so if you got another element which renders after that binding, the script will not work.

thanks for sharing the issue!