Search code examples
javascriptjqueryaddthisadd-this-event

addThis button not clickable via jQuery


I've tried looking at the documentation for addThis and it seems like it's being updated or something because all the links these help posts link to don't even mention the API bits they describe.

Anyway,

I just need to be able to programmatically click an addThis button. However, I can't seem to do it via console before I implement it in my code.

I read that this has something to do with how the addThis listeners are added only when the document is done loading. This doesn't make sense to me because even if I manually try to trigger a click in console, it still does nothing but return the html of the link I'm trying to trigger. For example:

   `$('.at-svc-facebook').click();`

OR `$('.at-svc-facebook').trigger('click');`

OR `$('.at-share-btn.at-svc-facebook').click();`

I mean, by the time I open console the dom is ready. So then what else might be preventing me from clicking these buttons via jQuery?

I've tried adding a listener to an element myself, and then clicking it programmatically, and it works. So something is different about the way addThis listens for a click. I may update this question with something I find after inspecting their js.

===================

This is what is in the DOM which addThis populates and listens to:

 <div class="addthis_sharing_toolbox"></div>

This is what ^ that code is turned in to from addThis:

<div class="addthis_sharing_toolbox" data-url="http://localhost:8001/halloween/" data-title="33 Halloween Costume Ideas">
  <div id="atstbx" class="at-share-tbx-element addthis_32x32_style addthis-smartlayers addthis-animated at4-show">
      <a class="at-share-btn at-svc-facebook">
          <span class="at4-icon aticon-facebook" title="Facebook"></span>
      </a>
      <a class="at-share-btn at-svc-twitter">
          <span class="at4-icon aticon-twitter" title="Twitter"></span>
      </a>
      <a class="at-share-btn at-svc-google_plusone_share">
          <span class="at4-icon aticon-google_plusone_share" title="Google+"></span>
      </a>
  </div>
</div>

Now, you can see the jQuery I'm using to click the buttons and the code it's trying to click.


Solution

  • The issue is that addThis was putting a second link with the exact same class in the DOM for some reason. It generates some HTML and appends it to body.

    So what I needed to do to select the button and trigger a click was to specify the 2nd element in the array of elements and call click on that one. Like so:

    $('.at-svc-facebook')[1].click();
    

    Now, the next problem I face is chrome block a programatic popup, but that's beyond the scope of this question. :(