title: AJAX remove a previously defined jquery and redefine again - Jquery not working on AJAX generated content
body: <p>First post, please be gentle..</p>
  
  <p>I am working on a social type page which loads new comments via AJAX prepend.
  e.g.</p>
  
  <pre><code>&lt;div class 'comment-said'&gt; 
  COMMENT HERE
  &lt;div class 'likes'&gt;
  &lt;a class="react" data-id="&lt;?=$comment-&gt;id?&gt;" data-class="Like"&gt;&lt;span&gt; 
  Like&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>There is a javascript/jQuery function called on page load to activate 'Like' button emoticon functions within the comments.  </p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
  $('.react').Reactions({
  postUrl: 'addlike.php'
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>top part of the 'react.js' javascript file called by $('.react').Reactions({ :</p>
  
  <pre><code>$.fn.Reactions = function(options) {        
  var settings = $.extend( {            
  postUrl: false, 
  defaultText: "Like"                                 
  }, options);        
  var emo_value;      
  var _data_html = '&lt;div style="position:absolute; z-index: 999;" class="_emobar" data-status="hidden"&gt;&lt;div class="_emolist"&gt;';       
  var emojis  = '&lt;img src="emos/Like.png" class="emo" data-emo-value="Like" style="" /&gt;';     
  emojis = emojis + '&lt;img src="emos/Love.png" class="emo" data-emo-value="Love" style="" /&gt;';     
  emojis = emojis + '&lt;img src="emos/LOL.png" class="emo" data-emo-value="LOL" style="" /&gt;';   
  
  _data_html = _data_html + emojis;       
  _data_html = _data_html + '&lt;br clear="all" /&gt;&lt;/div&gt;&lt;/div&gt;';     
  
  $(_data_html).appendTo($('body'));
  </code></pre>
  
  <p>However, as new comments are dynamically added, the originally declared <strong>'$('.react').Reactions({'</strong>  function does not work.</p>
  
  <p>As a workaround, I have got it to repeat the <strong>"$('.react').Reactions({"</strong> function call on each new comment added.  This works, but it's compound adding with each new comment, as the <strong>Reactions</strong> code is appending to <strong>$(body)</strong></p>
  
  <p>So on AJAX generated comments, each time the AJAX adds a new comment I'm ending up with multiple '_emolist' divs</p>
  
  <pre><code>&lt;div class 'comment-said'&gt; 
  COMMENT HERE
  &lt;div class 'likes'&gt;
     &lt;a class="react" data-id="&lt;?=$comment-&gt;id?&gt;" data-class="Like"&gt;&lt;span&gt; Like&lt;/span&gt;
  
  &lt;div class="_emolist" style="width: 250px;"&gt;&lt;img src="emojis/Like.svg" class="emoji" data-emoji-value="Like" style=""&gt;&lt;img src="emojis/Love.svg" class="emoji" data-emoji-value="Love" style=""&gt;&lt;img src="emojis/LOL.svg" class="emoji" data-emoji-value="LOL" style=""&gt;&lt;br clear="all"&gt;&lt;/div&gt;
  &lt;div class="_emolist" style="width: 250px;"&gt;&lt;img src="emojis/Like.svg" class="emoji" data-emoji-value="Like" style=""&gt;&lt;img src="emojis/Love.svg" class="emoji" data-emoji-value="Love" style=""&gt;&lt;img src="emojis/LOL.svg" class="emoji" data-emoji-value="LOL" style=""&gt;&lt;br clear="all"&gt;&lt;/div&gt;
  &lt;div class="_emolist" style="width: 250px;"&gt;&lt;img src="emojis/Like.svg" class="emoji" data-emoji-value="Like" style=""&gt;&lt;img src="emojis/Love.svg" class="emoji" data-emoji-value="Love" style=""&gt;&lt;img src="emojis/LOL.svg" class="emoji" data-emoji-value="LOL" style=""&gt;&lt;br clear="all"&gt;&lt;/div&gt;
  
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>SO..</p>
  
  <p>Is there a way to unset the <strong>'$('.react').Reactions({'</strong> call and then declare it again with each new item?</p>
  
  <p>I've searched Google and this site, and can't find anything that works in this case</p>
  
  <p>TIA, Mike</p>