如何：从另一个元素触发社交分享按钮（单击）事件

Question

我的应用有一个邀请系统，用户可以在其中自定义自己的邀请网址（例如：http://www.app.com/i/jointhepartywithme），我需要让我的三个社交分享按钮（fb，twitter，linkedin）获取自定义网址和分享。我还为社交网络（fb，twitter，linkedin）使用自定义（不同的，手动编码）按钮，因为默认的按钮很难风格和丑陋。我无法获得我定制的按钮＆＃34;点击＆＃34;触发点击真实按钮的事件（我隐藏了因为它们很丑陋）。

这是一个糟糕的方法，我应该弄清楚如何为每个社交分享按钮定制CSS？我之前尝试过这个，我记得在iframe上改变CSS是一个庞大的PITA。

我试过.on .live .delegate。似乎没有什么能够触发社交分享按钮。其中两个是iframe，一个不是。关于如何处理这种情况的任何建议？

以下是我的代码，展示了我尝试过的不同方法。

  $(document).on('turbolinks:load', function(){

    $('#invite_section').on('click', 'div.twitter', function(){
      alert("Twitter clicked.");
      $('#twitter-widget-0').contents().find("body").click();
    });

    $('#invite_section').on('click', 'div.facebook', function(){
      alert("Facebook clicked.");
      var stuff = $('div.fb-share-button').trigger('click');
    });

    $('#invite_section').on('click', 'div.linkedin', function(){
      alert("LinkedIn clicked.");
      $('span.IN-widget')[0].click();
    });

  });