Get element id from the data-click Event

8 posts, 0 answers
  1. Adiga
    Adiga avatar
    1 posts
    Member since:
    Jul 2012

    Posted 05 Jul 2012 Link to this post

    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
  2.
  3. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2887 posts

    Posted 06 Jul 2012 Link to this post

    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!
  5. claude
    claude avatar
    4 posts
    Member since:
    Aug 2012

    Posted 24 Aug 2012 Link to this post

    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?
  7. Jason Kergosien
    Jason Kergosien avatar
    14 posts
    Member since:
    Mar 2007

    Posted 04 Sep 2012 Link to this post

    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.
  8.
  9. Georg
    Georg avatar
    7 posts
    Member since:
    Sep 2012

    Posted 22 Sep 2012 Link to this post

    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?
  11. claude
    claude avatar
    4 posts
    Member since:
    Aug 2012

    Posted 10 Oct 2012 Link to this post

    hi jason, pliz can u tell what was the 2nd option u actually used?? i'm still stucked
  13. John
    John avatar
    12 posts
    Member since:
    Nov 2012

    Posted 26 Nov 2012 Link to this post

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

  14.
  15. Dev
    Dev avatar
    4 posts
    Member since:
    Feb 2014

    Posted 23 Nov 2015 Link to this post

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