Question

I have elements on a page that are loaded dynamically, but I also need to be able to swipe on these divs.

I searched for jQuery swipe events, and found touchSwipe. This is nice because it’s cross browser, but it does not allow me to use .on() or .live(), so the dynamic elements aren’t accounted for.

Here’s an example of what I mean, http://jsfiddle.net/wUkZq/

The only way I could get swiping to work on the dynamic elements was to attach the swipe event to the parent. Problem is, I don’t want the parent to be swipeable. In the example, if you create a few elements with the a link, then try and swipe within .content, it will return the text of all elements, which is not what I’m wanting, as swiping should not be allowed in the parent.

Is there a better way to do this, or a better plugin? Ideally, I’d like to not use a plugin, but pure JS, but I can’t find a good example of calculating when the person is actually swiping instead of some other event (i.e. scrolling).

Answer 1

How about simply assigning each swipeable element a specific class, then checking for that class in the swipe event handler? It’s quite a common trick for such cases, I suppose. For example:

swipeLeft: function(event, direction, distance, duration, fingerCount) {
  var $target = $(event.target);  
  if (! $target.hasClass('sw')) {
    return false;
  }
  alert($target.text());
}

Here’s a JS Fiddle illustrating the concept.