title: Adding swipe event to dynamically loaded content with jquery
body: <p>Here is a js fiddle showing the problem.</p>
  
  <p><a href="http://jsfiddle.net/4CLqY/4/" rel="nofollow">http://jsfiddle.net/4CLqY/4/</a></p>
  
  <p>The swipe works fine on the red box but not on the new blue box which is created after pressing the new button. (swipe across red box with mouse for change)</p>
  
  <p>Sorry if this a dupe but I have not found any solution online which solves my particular issue.</p>
  
  <p>The code is from the touchSwipe site</p>
  
  <p><strong>javascript</strong> </p>
  
  <pre><code> $(function() {      
    //Enable swiping...
    $(".test").swipe( {
      //Generic swipe handler for all directions
      swipe:function(event, direction, distance, duration, fingerCount) {
        $(this).text("You swiped " + direction );  
      },
      //Default is 75px, set to 0 for demo so any distance triggers swipe
       threshold:0
    });
  });
  
  $(document).on('click','button',function(){
  
  
  $('&lt;div class="test" id="test2"&gt;Swipe me&lt;/div&gt;').appendTo('body');
  
  });     
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="test"&gt;Swipe me&lt;/div&gt;
  
  &lt;button&gt;New&lt;/button&gt;
  </code></pre>