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

Get element id from the data-click Event

7 Answers 1844 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Adiga
Top achievements
Rank 1
Adiga asked on 05 Jul 2012, 03:14 PM
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

7 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 06 Jul 2012, 12:51 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
claude
Top achievements
Rank 1
answered on 24 Aug 2012, 07:57 PM
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?
0
Jason Kergosien
Top achievements
Rank 1
answered on 05 Sep 2012, 01:52 AM
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.
0
Georg
Top achievements
Rank 1
answered on 22 Sep 2012, 04:59 PM
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?
0
claude
Top achievements
Rank 1
answered on 10 Oct 2012, 03:47 PM
hi jason, pliz can u tell what was the 2nd option u actually used?? i'm still stucked
0
John
Top achievements
Rank 1
answered on 27 Nov 2012, 02:55 AM

 <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>

0
Dev
Top achievements
Rank 1
answered on 24 Nov 2015, 12:46 AM
Have you tried e.item. I have similar code in my new project and e.item is the <li>.
Tags
ListView (Mobile)
Asked by
Adiga
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
claude
Top achievements
Rank 1
Jason Kergosien
Top achievements
Rank 1
Georg
Top achievements
Rank 1
John
Top achievements
Rank 1
Dev
Top achievements
Rank 1
Share this question
or