Using swipe with Jquery $(document).on() format

[BillTheGoat]

The $(selector).x format will not bind to dynamically inserted elements. I would like to attach swipe to dynamically created elements, which jquery binds to using the .on( events [, selector ] [, data ], handler ) format. Is there a way to do this, and if not could we get this added as a feature request? It is a relatively common scenario...

PS: Great plugin. It is the only touch plugin I have found that actually works on Android with its aggressive touchcancel.

[mattbryson]

yeah, It should really do this. at the moment, the events for 'swipe', 'tap' etc etc are only bound and triggered if you pass in handlers when initialising $.swipe(). - such as $("#el").swipe(tap:function() {});

I'll look at triggering these events regardless of inline handlers, and then the events will be triggered and bubble up regardless.

[jcxnet]

try with destroy method, I've tested recently and works for dynamic elements inserted via ajax

[BillTheGoat]

Are you saying I should destroy and reload swipe every time I add an element? I had thought of that but not tested, since I have perhaps ten handlers attached to elements within divs I add, and I would have to rebuild them all quite often...

[jcxnet]

By now is the only way I found, the function for swipe plugin must be applied to a class for avoid a calling by each element

[mattbryson]

@wackhope was also after using the .on() function in ticket. #301.

@wackhope @BillTheGoat @jcxnet I have started a branch that allows the use of .on() style events without having to define handlers in the config.

However, this would not solve the issue of adding / removing items to the DOM. Unless these items are children of the swipe-able item.

You will still have to call $('.selector').swipe(); to set up the relevant internal event handlers.

// set up the element to trigger swipe events.
$('.content .my-swipe-element').swipe();

// now receive one..
$('.my-swipe-element').on('swipe', function() { 
   console.log('you swiped my element");
});

However, removing that element from the DOM, and adding a new one will kill all the events that TouchSwipe needs to register, so you will still have to re-initiate the new DOM element as a swipe-able area....

What is the use case you have here?
Multiple individually swipe-able elements that are dynamically added? or one swipe-able element, with child content that is dynamically updated?

The latter should work fine i would have thought.

The former, you cant get away from the fact that TouchSwipe will need to register event handlers to a DOM element to track gestures across that element. If you remove that element and add anew one, you are going to have to re add those handlers with .swipe().

If you can provide me an example use case, or even a JS fiddle that would be great..

m

[BillTheGoat]

I am not currently using TouchSwype (it was because of this issue, so next time I will take a look). My use case is a bunch of dynamically added containers that have children that are individually swipable. But some are prepopulated on load. So:

<div class="content">
     <div  class="mightbedynamic">
               <div class="swipable1">...</div>
                ...
     </div>
      ....
</div>

Then I can add in more <div class="mightbedynamic"> elements, including a bunch of swipable content, via a button, as well as remove them by swiping.

Edit: The point is to allow users to add rows to prepopulated data (more or less).

[mattbryson]

So, in TouchSwipe, for you dynamically add areas that individually need to detect swipes, you would have to re initiate the divs as touchSwipe areas. With the new on support, you could add all the handlers at a higher level, and then just run something like $('.content .swipeable').swipe() after you have added the elements. But not till the next release...

[BillTheGoat]

Do I need to unbind first, or just run $('.content .swipeable').swipe() even if it is already initialized on that that class? It certainly sounds easy to use ;-).

[mattbryson]

if an element has already been initialised, re running .swipe() does nothing. However, not calling .swipe('destroy') on the item could leave DOM elements hanging around in memory due to the events keeping them from being garbage collected.

I'll put a link to beta version and the demo page once I have somehting working.

[daya]

any updates on this ? it has been ~ 1.5 years since last release. I desperately need the .on() support

[filly82]

I had the same problem and solved it with destroying and re-initializing. but still, the .on() support would be nice

GREAT PLUGIN, by the way

[polygbrl]

I solved this by using the .on( events [, selector ] [, data ], handler ) format with, as event, a function that is getting all the possible events, for example,

function ev(el) {
    var result = [];
    for (var key in el) {
        if (key.indexOf('on') === 0) {
            result.push(key.slice(2));
        }
    }
    return result.join(' ');
}

Then you can call a function as handler with your swipe events. For example,

$(window).on(ev(window[0]), function(){
    $("#yourSelector").swipe( {
        swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
          $(this).text("You swiped " + direction );  
        },
         threshold:0
      });
});

This way you can kind of use .on( events [, selector ] [, data ], handler ) format with TouchSwipe.

[sakhawat520]

thx

On Mon, Sep 11, 2017 at 3:39 PM, polygbrl [email protected] wrote:

I solved this by using the .on( events [, selector ] [, data ], handler ) format with, as event, a function that is getting all the possible events, for example,

function ev(el) { var result = []; for (var key in el) { if (key.indexOf('on') === 0) { result.push(key.slice(2)); } } return result.join(' '); }

Then you can call a function as handler with your swipe events. For example,

$(window).on(ev(window[0]), function(){ $("#yourSelector").swipe( { swipe:function(event, direction, distance, duration, fingerCount, fingerData) { $(this).text("You swiped " + direction ); }, threshold:0 }); });

This way you can kind of use .on( events [, selector ] [, data ], handler ) format with TouchSwipe.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/mattbryson/TouchSwipe-Jquery-Plugin/issues/281#issuecomment-328476467, or mute the thread https://github.com/notifications/unsubscribe-auth/AOvCE9eEJQwka6BICdigLBB8IVZ1kPOtks5shP_JgaJpZM4Hc2tn .