This is a migrated thread and some comments may be shown as answers.

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

3 Answers 176 Views
General Discussion
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Nathaniel
Top achievements
Rank 1
Nathaniel asked on 18 Jun 2015, 12:17 AM

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!

3 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 22 Jun 2015, 02:08 PM
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.

 
0
Nathaniel
Top achievements
Rank 1
answered on 29 Jun 2015, 02:47 PM

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.

0
Tsvetina
Telerik team
answered on 02 Jul 2015, 11:03 AM
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.

 
Tags
General Discussion
Asked by
Nathaniel
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Nathaniel
Top achievements
Rank 1
Share this question
or