locked
Cannot bind MSGestureTap with jQuery? (knockoutjs)

    Question

  • I'm trying to handle the MSGestureTap event (as the click event seems to fire more often than not while scrolling content) but for some reason I am not able to get the MSGestureTap event to stick. Is there anything special about the MSGestureTap events that might make them not able to be used in the following way?

    function ready(element, options) {
        $(element).find('.thingContainer .things').on('MSGestureTap', '.thing', function () {
            // This never fires!
            console.log('Tap!');
        });
    }
    
    WinJS.UI.Pages.define("/html/homePage.html", {
        ready: ready
    });

    The above code will never trigger the event. If I change 'MSGestureTap' to 'click' it works as expected

    function ready(element, options) { $(element).find('.thingContainer .things').on('click', '.thing', function () { // This works like a charm! Except that // it doesn't really work because it // interferes with scrolling. console.log('Click!'); }); } WinJS.UI.Pages.define("/html/homePage.html", { ready: ready });


    We are using knockoutjs so I'm not sure if that could be causing any problems. The fact that 'click' works makes me think that maybe it isn't knockoutjs related and something special with the MSGestureTap event.

    The '.thingsContainer .things' selector is always selectable but the '.things' targets are dynamic and may not be available at the time of the event binding. This isn't a problem for 'click', though.

    Friday, June 1, 2012 1:59 AM

Answers

  • Hi Sachin,

    There are changes for RP.  See the Migration doc at the top of the post for handling Tap.  Beau's problem is CP however so the change does not affect him.

    -Jeff


    Jeff Sanders (MSFT)

    Tuesday, June 5, 2012 11:55 AM
    Moderator

All replies

  • Hi Beau,

    What version of the OS are you using?  There have been changes to the RP that you need to be aware of if you are using that: You should read the Migrating from Windows 8 Consumer Preview to Release Preview document.

    -Jeff


    Jeff Sanders (MSFT)


    Friday, June 1, 2012 1:11 PM
    Moderator
  • Hi Jeff, I'm not running RP yet, I'm still running Consumer Preview.
    Friday, June 1, 2012 1:14 PM
  • In general you want to make sure you don't use jQuery until after you hit WinJS.UI.processAll().  Other than that we have jQuery in several apps.

    Would it be possible for you to put together a simple repro of the issue for further investigation?

    -Jeff


    Jeff Sanders (MSFT)

    Friday, June 1, 2012 2:13 PM
    Moderator
  • I'll see if I have time to boil this down to a simple case that consistently fails. The problem is that right now this is only failing for some parts of the DOM but not others so I'm not sure I'll be able to reproduce the problem in another way.

    In general, I assumed that the events were all equal as far as how we can interact with them. Is there anything about the MSGestureStart event that is fundamentally different than the click event that might make it be have differently?

    Friday, June 1, 2012 3:02 PM
  • In general you want to make sure you don't use jQuery until after you hit WinJS.UI.processAll()

    I have confirmed that we are not attaching these bindings until after WinJS.UI.processAll() is called.

    I've tried MSPointerUp and MSPointerDown and both of those work. I just can't seem to get MSGestureTap to fire.

    Friday, June 1, 2012 4:44 PM
  • OK, Let's go the repro route then.  Can you post a simple project that uses that library and shows the issue?

    Jeff Sanders (MSFT)

    Monday, June 4, 2012 12:55 PM
    Moderator
  • Hi Beau,

    I have experienced the same issue.

    It has stopped working since i upgraded os to RP.

    I'm using gestureTap event along with jQuery and binding event using jQuery on() fn.

    I'm not using knockout.js so knockout is not messing the "getstureTap" event.

    I dont know what is stopping it to fire.. I replaced it with "MSPointerDown" event and it works..

    -Sachin

    Tuesday, June 5, 2012 11:53 AM
  • Hi Sachin,

    There are changes for RP.  See the Migration doc at the top of the post for handling Tap.  Beau's problem is CP however so the change does not affect him.

    -Jeff


    Jeff Sanders (MSFT)

    Tuesday, June 5, 2012 11:55 AM
    Moderator
  • Hi,

    I'm still not able to bind "MSGestureTap" with jquery on() method.

     $("#dataGridContainer").on("MSGestureTap", "tr", function (e) {
                console.log("fired");
              
            });
     var a = new MSGesture();
     var aElem = document.getElementById("dataGridContainer");
     a.target = aElem;

    Here is HTML

    <table>
       <tbody id="dataGridContainer">
       </tbody>
     </table>

    Where "<tr></tr>" is generated on the fly using winjs template.


    Can anybody give me sample to enable "MSGestureEvent" using jQuery.

    In general, IT would be great if someone provide sample code instead of giving links to videos and other links.

    -Sachin

    Thursday, June 7, 2012 12:41 PM