Search code examples
jqueryclonemouseclick-eventaddthis

addthis-button loses click-eventhandler after jquery clone()

all

my problem is as follows:

I have a page containing an addthis-button. Normally, a click opens a small menu.

At some point, parts of this page - including the addthis-button - get cloned (via jQuery) and reused on the same page.

If I click on the cloned button, the menu doesn't open, and an addthis page is loaded.

So, apparently the eventhandler gets lost, and the button (which is really an <a>) reverts to being a link and displays the linked page.

So how can I re-register the events of the cloned button?

ETA: To clarify: I want to clone addthis_button complete with everything addthis_widget.js did to it. mylittlebutton and its clickhandler clickedhim() are irrelevant for the problem, they only trigger the cloning of addthis_button.

I'd be grateful if some could point me in the right direction Also, I have a 20-line snippet that illustrates this, if that helps.

Thank you

ETA: the code snippet:

<script src='../../js/lib/jquery-1.6.2.js' type="text/javascript"></script>

<!-- up to here, the original button is initialized -->
<a class="addthis_button addthis_button" href="http://www.addthis.com/bookmark.php?v=250">
  <img src="../../resources/img/button_share.gif" width="59" height="17" alt="Bookmark and Share" style="border:0"/>
</a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>


<br />

<!-- button to trigger the cloning -->
<input type="button" id="mylittlebutton" onclick="clickedhim(this);" value="CLICK ME" />

<script type="text/javascript" >
function clickedhim(eventtarget) {
  var nearest_addthis = $(eventtarget).siblings("a.addthis_button");
  // clone button, and insert it after the original
  nearest_addthis.after(nearest_addthis.clone());
}
</script>
Solution

  • Okay, I solved it.

    According to the Addthis Client API, any unsuspecting element can be turned into an addthis.button with 

    <script type="text/javascript">
addthis.button("#atbutton");
</script>

    So, after I clone my elements, I call 

    addthis.button(".addthis_button");

    and everything works like a charm.

    Thank you all for your help.

    Addendum: The above works to initialize the individual do-everything AddThis button. If you have individual button controls such as Email, Facebook, etc..., you will need to use

    addthis.toolbox('<parent element>');

    to initialize those controls.