Dynamically changing url in sharrre Jquery

Question

My question is the following:

I have multiple filters on my page, that filter events schedule dynamically, so when I click on any of the filters, my url changes without reloading the page.

For example:

http://.../schedule/#Screening,Free

http://.../schedule/#Talk,Expo

Then, I have share buttons with Sharrre:

    .social.social--share-filters
        a.icon.icon-twitter.js-twitter-filters(href="#", target="_blank")
        a.icon.icon-linkedin2.js-linkedin-filters(href="#", target="_blank")
        a.icon.icon-facebook.js-facebook-filters(href="#", target="_blank")

---

  $('.js-facebook-filters').sharrre({
share: {
  facebook: true,
},
url: window.location.href,
enableTracking: false,
enableHover: false,
click: function(api, options) {
  api.simulateClick();
  api.openPopup('facebook');
}
  });

Inspite of that fact that inside sharrre I have url variable that equals to current link, it shares only that link which is derived when page is loaded for the first time.

I tried to put it inside click event on the icons - that does not work. I tried to put sharrre inside a function (eg. initialiseShare) and do window.initialiseShare = initialiseShare; - that also does not work. And I tried to remove and append the button, changing data-url attribute, and it also does not work.

function initialiseShare(link) { 
   $('.js-twitter-filters').sharrre({
    share: {
      twitter: true,
    },
    enableTracking: false,
    enableHover: false,
    click: function(api, options) {
      api.simulateClick();
      api.openPopup('twitter');
    }   }); }

+

$(document).ready(function() {
    initialiseShare();
    $('.js-twitter-filters').on('click', function(){
        var clone = $('.js-twitter-filters').clone();
        $('.js-twitter-filters').remove();
        $('.social--share-filters').append(clone);
        $('.js-twitter-filters').data('url', window.location.href);
        initialiseShare();
        return false;
    });
});

+

jade for the icon

    .social.social--share-filters
        a.icon.icon-twitter.js-twitter-filters(href="#", target="_blank" data-url="#")

Please, help!

Thank you in advance!

PS I can use any other solution except those which could lead to buttons which cannot be customised in design.

Answer 1

Try this:

$('body').on('DOMNodeInserted', '.js-twitter-filters', function(e) {
  $(this).sharrre({
    share: {
      twitter: true,
    },
    enableTracking: false,
    enableHover: false,
    click: function(api, options) {
      api.simulateClick();
      api.openPopup('twitter');
    }
  });
});

Explanation:

You're trying to bind to dynamically loaded elements. When your script executes on page load, the elements are not available for jQuery to perform the binding with "sharrre" - so you can use the .on() live binding delegate to bind to elements after insertion.

Reference:

• http://api.jquery.com/on/