title: Swipe not working when added dynamically via AJAX
body: <p><strong>Background:</strong></p>
  
  <p><em>Page B</em> is dynamically loaded in <em>Page A</em> by XMLHttpRequest. <em>Page B</em> contains list of name which on swipe reloads <em>Page B</em> itself.</p>
  
  <p><strong>Issue:</strong></p>
  
  <p>When <em>Page A</em> is loaded swipe is working fine, but when <em>Page B</em> reloads, Swipe functionality fails to function.</p>
  
  <p>Tried with swipe.js in <em>Page B</em> as well but nothing seems to work.</p>
  
  <p>Would be great help if anyone could point out issue... Thanks</p>
  
  <p><strong>Code</strong></p>
  
  <blockquote>
    <p>Page A:</p>
  </blockquote>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Page Title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;script&gt;
  
  var d = '&lt;?php echo $result["d_delayed"]; ?&gt;';
  var q = '&lt;?php echo $result["d_queued"]; ?&gt;';
  if(typeof(EventSource) !== "undefined") {
      var source = new EventSource("detect_change");
      source.onmessage = function(event) {
          var obj = JSON.parse(event.data);
  
          // Reload on Queue Update
          document.getElementById("title_change").innerHTML = obj.name;
  
          if(d != obj.delay || q != obj.queue){
              loadDoc("");
          }
      };
  }
  &lt;/script&gt;
  &lt;div&gt;
  &lt;p id="demo"&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;script&gt;
  //Load through XMLHttpRequest
  function loadDoc(search) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (this.readyState == 4 &amp;&amp; this.status == 200) {
            document.getElementById("demo").innerHTML = this.responseText;
          }
        };
  
        xhttp.open("GET", "swipe_page.php", true);
        xhttp.send();
      }
      loadDoc(search);
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <blockquote>
    <p>Page B (swipe_page.php)</p>
  </blockquote>
  
  <pre><code>&lt;ul class="list-group list-group-flush patient-list swipe-list bottom-pad-ul"&gt;
      &lt;li class="list-group-item"&gt;
          &lt;div class="patient-list__info swipe swipe-left-right" linkRight="#link" linkLeft="#link"&gt;
              &lt;a data-toggle="modal" class="bg-hov" data-target="#myModal"&gt;&lt;span class="span-left-arrow"&gt;&lt;i class="fa fa-chevron-left float-left" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;a href="#" class="patient-list__link"&gt;&lt;span class="patient-list__patient-name"&gt;User Name&lt;/span&gt;&lt;/a&gt;
              &lt;a data-toggle="modal" data-target="#myModal"&gt;&lt;span class="badge badge-light badge-pill patient-list__patient-badge patient-list__patient-badge--first"&gt;number&lt;/span&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="patient-list__info patient-list__info--mirror" style=""&gt;
              &lt;i class="fa fa-reply" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp&amp;nbspUndo
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <blockquote>
    <p>Swipe script </p>
  </blockquote>
  
  <pre><code>     var s1 = Swiped.init({
  
          query: 'li&gt;.swipe-right',
          list: false,
          left: 5,
          right: 0
          });
          var s2 = Swiped.init({
              query: 'li&gt;.swipe-left-right',
              list: false,
              left: 5,
              right: 5
          });
          jQuery(document).on('touchstart', 'li&gt;.swipe-right', function() {
              s1.open;
          });
          jQuery(document).on('touchstart', 'li&gt;.swipe-left-right', function() {
              s2.open;
  
      });
  
      var onOpenfunction = function() {
          var clickUndo = false;
          var dir = this.dir;
          var offset, invert_offser;
          //jQuery(this.elem).css('transform', 'translate3d(0px, 0px, 0px)');
          if (dir === 1) {
              offset = '110%';
              invert_offser = '-110%';
          } else {
              offset = '-110%';
              invert_offser = '110%';
          }
          jQuery(this.elem).animate({left: offset});
  
          console.log(offset);
          jQuery('.patient-list__info--mirror',jQuery(this.elem).parent()).css('left',invert_offser).animate({left: 0});
  
          jQuery('.patient-list__info--mirror',jQuery(this.elem).parent()).click(function () {
  
              jQuery('.patient-list__info',jQuery(this).parent()).not('.patient-list__info--mirror').animate({left: 0});
              jQuery(this).animate({left: invert_offser});
              clickUndo = true;
              jQuery(this).off();
          });
          var currentElem = this.elem;
          var parentElem = jQuery(this.elem).parent();
          setTimeout(function() {
              if(!clickUndo) {
                  jQuery(parentElem).hide();
                  if(dir === 1){
                      console.log(jQuery(currentElem).attr('linkRight'));
                      var right_swipe = jQuery(currentElem).attr('linkRight');
                       $.ajax({url: right_swipe, success: function(result){
  
              }});
                  } else {
                      console.log(jQuery(currentElem).attr('linkLeft'));
                      var left_swipe = jQuery(currentElem).attr('linkLeft');
                       $.ajax({url: left_swipe, success: function(result){
  
              }});
                  }
              }
          }, 5000);
      };
  
      Swiped.init({
          query: 'ul.swipe-list&gt;li&gt;.swipe-left-right',
          onOpen: onOpenfunction
      });
      Swiped.init({
          query: 'ul.swipe-list&gt;li&gt;.swipe-right',
          onOpen: onOpenfunction
      });
  </code></pre>