Get element id from the data-click Event

[Adiga]

Hi,

I am new to Kendo Framework and I am using it for a Mobile application.

I have a javascript function which gets called when one of the <Li> gets clicked, the javascipt function is provided through <ul> data-click attibute. some thing like
<ul data-role="listview" data-style="inset" data-type="group" data-click="listViewClick">
The problem is, when this function listViewClick() gets called with a parameter e (event), I am unable to get the Target ( the <li> that was clicked). I tried to print e.target, e.target.id but no luck.
I need help on how to get the id of the element that was clicked.

TIA,
Manju

[Alexander Valchev]

Hi Adiga,

The selected list item could be retrieved through the item parameter of the event data. For example:

function onClick(e) {
    //e.item;
}

In the corresponding documentation you can find a detailed information about click event properties as well as a code snippet examples.
I hope this helps.

Regards,
Alexander Valchev
the Telerik team

[claude]

hi alexander!! i'm a newbie in web dvpt and i kinda have the same problem. here is the portion of my first page :
<ul data-role="listview" data-style="inset" data-click="listViewClick">
          <li><a href="#history"><a>SMS History</a></li>
     </ul>


function listViewClick(e) {
     console.log(e.button); // Kendo mobile Button instance
 }
normally a click on the button should lead me to the next page. Please can you tell me where is my error?

[Jason Kergosien]

I had the same issue and, though I could not get the first option to work, the second did work successfully. Give it a try.

[Georg]

I tried your in your example

<ul data-role="listview" id="foo" data-click="listViewClick">

    <li><a data-role="button" data-name="bar">Bar button</a> | <a data-role="button" data-name="baz">Baz button</a></li>

</ul>

 

<script>

 function listViewClick(e) {

     console.log(e.button); // Kendo mobile Button instance

 }

</script>

in jsfiddle - http://jsfiddle.net/NNcnR/12/ - and it didn't work. Where is the problem?

[claude]

hi jason, pliz can u tell what was the 2nd option u actually used?? i'm still stucked

[John]

 <ul data-role="listview" data-style="inset" data-click="testListLink">

  <li id="Iam_the_LI"><a id="Iam_the_closest_A">Test Link</a></li>

 </ul>




<script>

function testListLink(e){

alert(e.item.attr('id'));//Iam_the_LI

alert(e.target.closest('a').attr('id'));//Iam_the_closest_A
}
</script>

[Dev]

Have you tried e.item. I have similar code in my new project and e.item is the <li>.