HELP - Binding touch events dynamically

[JesperIsMe]

Hi

Thanks for a great script!

I have a problem delegating events dynamically. Im using

$( document ).delegate( selector, events, data, handler ); $( document ).on( events, selector, data, handler );

...WITH selectors. But the scripts throws an error. It works absolutely wonderful on normal static eventhandling.

Can you help?

Error from console:

Uncaught TypeError: f.getClientRects is not a function at r.fn.init.offset (jquery-3.2.1.min.js:4) at HTMLDocument.touchMove (jquery.mobile-events.js:594) at HTMLDocument.dispatch (jquery-3.2.1.min.js:3) at HTMLDocument.q.handle (jquery-3.2.1.min.js:3) offset @ jquery-3.2.1.min.js:4 touchMove @ jquery.mobile-events.js:594 dispatch @ jquery-3.2.1.min.js:3 q.handle @ jquery-3.2.1.min.js:3

[benmajor]

What is the error that you receive? Also, can you share your code please?

[JesperIsMe]

Updatet comment with error - heres my simple code:

$(document).on('swipeleft','div.active-card',function(){
        var cardId='#'+$(this).attr('data-next');
        var nextCard=$(cardId);
        if(nextCard){
            SwipeCardLeft($(this));
            ShowCard(nextCard);
        }
    });

[benmajor]

This seems to be an issue with an external lib problem, not with Touch Events. Are you using jQuery UI by any chance?

[benmajor]

Please try using jQuery Migrate 3.0 with your jQuery version: http://code.jquery.com/jquery-migrate-3.0.0.js

[JesperIsMe]

Im using https://code.jquery.com/jquery-3.2.1.min.js so migrate-script should be unneccesary?

[JesperIsMe]

Is it neccesary to delegate several touch-events, for the swipe to be recognized?

[benmajor]

No, that isn’t required. Can you try with the migrate script to see if it works?

On Tue, 3 Oct 2017 at 09:14, JesperIsMe notifications@github.com wrote:

Is it neccesary to delegate several touch-events, for the swipe to be recognized?

— You are receiving this because you were assigned.

Reply to this email directly, view it on GitHub https://github.com/benmajor/jQuery-Touch-Events/issues/136#issuecomment-333771913, or mute the thread https://github.com/notifications/unsubscribe-auth/ABRKqEev1uPO6_KynQJfj-3oM3RSWlB4ks5soez_gaJpZM4PruIy .

[JesperIsMe]

Have tried - no succes im afraid. It just throws another error:

JQMIGRATE: jQuery.fn.offset() requires an element connected to a document
migrateWarn @ jquery-migrate-3.0.0.js:62
jQuery.fn.offset @ jquery-migrate-3.0.0.js:453
touchStart @ jquery.mobile-events.js:543
dispatch @ jquery-3.2.1.min.js:3
q.handle @ jquery-3.2.1.min.js:3
jquery-migrate-3.0.0.js:64 console.trace
migrateWarn @ jquery-migrate-3.0.0.js:64
jQuery.fn.offset @ jquery-migrate-3.0.0.js:453
touchStart @ jquery.mobile-events.js:543
dispatch @ jquery-3.2.1.min.js:3
q.handle @ jquery-3.2.1.min.js:3

[benmajor]

Does regressing to jQuery < 3 resolve the issue?

On Tue, 3 Oct 2017 at 09:17, JesperIsMe notifications@github.com wrote:

Have tried - no succes im afraid. It just throws another error:

JQMIGRATE: jQuery.fn.offset() requires an element connected to a document migrateWarn @ jquery-migrate-3.0.0.js:62 jQuery.fn.offset @ jquery-migrate-3.0.0.js:453 touchStart @ jquery.mobile-events.js:543 dispatch @ jquery-3.2.1.min.js:3 q.handle @ jquery-3.2.1.min.js:3 jquery-migrate-3.0.0.js:64 console.trace migrateWarn @ jquery-migrate-3.0.0.js:64 jQuery.fn.offset @ jquery-migrate-3.0.0.js:453 touchStart @ jquery.mobile-events.js:543 dispatch @ jquery-3.2.1.min.js:3 q.handle @ jquery-3.2.1.min.js:3

— You are receiving this because you were assigned.

Reply to this email directly, view it on GitHub https://github.com/benmajor/jQuery-Touch-Events/issues/136#issuecomment-333772448, or mute the thread https://github.com/notifications/unsubscribe-auth/ABRKqFuDTajR3ca8KPiw7TaaxigzAAZLks5soe2XgaJpZM4PruIy .

[JesperIsMe]

Tried with: https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js

With the migrate script.

Still error:

JQMIGRATE: jQuery.event.fixHooks are deprecated and removed: touchmove
migrateWarn @ jquery-migrate-3.0.0.js:62
jQuery.event.fix @ jquery-migrate-3.0.0.js:360
dispatch @ jquery.min.js:3
r.handle @ jquery.min.js:3
jquery-migrate-3.0.0.js:64 console.trace

[benmajor]

There seems to be an issue with event delegation on swipe events. Can you try binding tap to see if there are any errors?

I've put together a test using 2.2.4 and can't seem to get swipe working, but tap is fine: https://jsfiddle.net/1fpegmjv/

[JesperIsMe]

Very odd, im using https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js, like on JSFiddle, but still it throws error on 'tap':

Uncaught TypeError: Cannot read property 'left' of undefined
    at HTMLDocument.tapFunc2 (jquery.mobile-events.js:488)
    at HTMLDocument.dispatch (jquery.min.js:3)
    at HTMLDocument.r.handle (jquery.min.js:3)

[JesperIsMe]

Its trying to capture events on: <div id="start" class="card active-card" data-next="more"></div>

[benmajor]

I do not understand why the Fiddle seems to work, and your code does not. It may be an issue with the callback functions. Can you put together a jsFiddle that replicates the issue for me? Thanks.

[JesperIsMe]

This looks like the same error, using 'tap': https://jsfiddle.net/cnLt3985/

[benmajor]

Thanks, I think I understand what's going on here. There is a known issue delegating to document with the library (i.e. https://github.com/benmajor/jQuery-Touch-Events/issues/135 and https://github.com/benmajor/jQuery-Touch-Events/issues/128).

To fix, delegate your events to body instead of document:

$('body').on('swipeleft', 'div.active-card', function() {
    var cardId='#'+$(this).attr('data-next'),
        nextCard=$(cardId);

    if(nextCard)
    {
        SwipeCardLeft($(this));
        ShowCard(nextCard);
    }
});

[JesperIsMe]

You are an absolute wizard: $('body').on('tap','.active-card',function(){} did the trick!

[benmajor]

Great, no problem! Glad it was resolved. Fixing the delegation to document is a TODO, so keep posted for when it's fixed. In the meantime, there's no issue with delegating to body.

[JesperIsMe]

You have saved me much time 👍 If you need help with anything (besides javascript 😉), just say the word: jesper@isme.dk

[JesperIsMe]

A followup - seems like the solution only works with 'tap' events 😐 'swipe'-events are not registered at all (eg. also throws no error).