jQuery event handlers don't work on mobile device (Kendo UI Mobile)

4 posts, 0 answers
  1. Nathaniel
    Nathaniel avatar
    7 posts
    Member since:
    Feb 2015

    Posted 17 Jun 2015 Link to this post

    I ran into the following problem:

    When something is clicked in my app, I need to run a function that retrieves a data-attribute from the object that has been clicked.

    In the emulator I can run some jQuery that says

    $("div[data-video-url]").click(function() {
       alert($(this).data('video-url'));
    });

    And it returns the correct value.

    But when I run this on my phone the .click event handler does not fire.

    Instead, I used data-click and wrapped alert($(this).data('video-url')); in a function that was called by data-click. However, this returns undefined (I believe because once inside the function, 'this' loses its scope).

    Is there a way to get jQuery event handlers to work on mobile devices? Or is there another easy way to do what I need in Kendo UI Mobile?

    One other thing: I can only get data-click to fire when it is attributed to an element with data-role="button". Is there way to attached data-click to elements that aren't buttons?

    Thanks!

  2. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 22 Jun 2015 Link to this post

    Hello Nathaniel,

    I am not sure why you get the problem with the jQuery event assignment. There should be no problem with using jQuery to access elements and attaching events to them in hybrid apps. If you provide a bit more context—the HTML, the place in your app where you execute the scripts, etc.—I will try to reproduce the problem to see what causes it.

    As for the second issue, you can attach events to any elements in a Kendo UI Mobile app declaratively, using the data-bind attribute. Try the following:

    1) Define the event handler in the view's viewModel file:

    (function (global) {
        var LoginViewModel,
            app = global.app = global.app || {};
     
        LoginViewModel = kendo.data.ObservableObject.extend({
            //......
     
            showMsg: function () {
                alert("More info");
            }
        });
     
        app.loginService = {
            viewModel: new LoginViewModel()
        };
    })(window);


    2) Add the following to your DIV element:
    <div id="tabstrip-login"
        data-role="view"
        data-title="Login"
        data-model="app.loginService.viewModel">
     
        <div data-bind="events: {click: showMsg}">Click here to view more info</div>
    </div>

    If you want to take a look at a sample that demonstrates the correct usage of Kendo UI MVVM, check this app

    Regards,
    Tsvetina
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  3. Nathaniel
    Nathaniel avatar
    7 posts
    Member since:
    Feb 2015

    Posted 29 Jun 2015 in reply to Tsvetina Link to this post

    Thanks for the reply. I dug into this on my own and ended up with a solution very similar to yours.

    However, I still can't get the jQuery event assignments to work. 

    It's pretty simple (and strange).

    In a remote view I have:

    <div id="testing123">event test</div>
     
    <div data-role="button" data-click="testAlert">data-click test</div>

    And in my app.js I have:

    function testAlert() {
      alert("test");
    }

     

    $( "#testing123" ).on( "click", function() {     
      alert("test");
    });

    The data-click works but not the jQuery method. I've tried several different things.

    Thanks.

  4. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 02 Jul 2015 Link to this post

    Hi Nathaniel,

    This behavior can be observed if you are trying to add the event listener when the div element is not yet added to the DOM. To be sure, that the element is going to be available, you can add this code into the view's init event handler:
    <div data-role="view" data-title="Home" data-layout="main" data-model="APP.models.home" data-init="APP.events.homeInit">
      <h1 data-bind="html: title"></h1>
        <div id="testing123">event test</div>
        <div data-role="button" data-click="APP.events.testAlert">data-click test</div>
    </div>

    window.APP = {
        events: {
            homeInit: function () {
                $("#testing123").on("click", function () {
                    alert("test");
                });
            },
            testAlert: function () {
                alert("test");
            }
        }



    Regards,
    Tsvetina
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top