framework7

Open full view…

Getting list item of a swipe/click event

dyeates
Mon, 25 Apr 2016 17:41:45 GMT

I have a virtual list and each list item has a custom render and is swip-able. I have the events coming through from the swipe/click events now, but I need to know which list item was clicked, and I can't see a way to get this info? Perhaps a list index for the item? Or ideally, the actual item itself?

dyeates
Mon, 25 Apr 2016 17:44:33 GMT

e.target seems to contain the info on the button that caused the event, but I'm after the list item itself?

NikolayKuznetsov
Mon, 25 Apr 2016 17:51:27 GMT

Set item's index into "data-index" field to item's template For example --- renderItem: function (index, item) { return '<li class="item-content">' + '<div class="item-media"><img src="' + item.picture + '"></div>' + '<div class="item-inner">' + '<div class="item-title" data-index="'+index+'">' + item.title + '</div>' + '</div>' + '</li>'; } --- and get its value in click handler $$(e.target).prop("data-index)

dyeates
Mon, 25 Apr 2016 18:08:55 GMT

Tried it but I am getting 'undefined' when I look up the value. Here is the html of my custom render template: ---html <li class="swipeout"> <div class="swipeout-content item-content"> <div class="item-media"><i class="icon icon-NDB"></i></div> <div class="item-inner"> <div class="item-title" data-index="51">LEICESTER NDB</div> <div class="item-after"><span class="badge">LE</span></div> </div> </div> <div class="swipeout-actions-left"><a href="#" class="info bg-blue swipeout-overswipe swipeout-close"><i class="fa fa-info-circle fa-2x"></i></a><a href="#" class="tune1 bg-green swipeout-close">Tune Nav1</a></div> <div class=" swipeout-actions-right"><a href="#" class="tune2 bg-green swipeout-close">Tune Nav2</a></div> </li> --- And then the JS code: --- $$(document).on('click', '.info', function (e) { console.log($$(e.target).prop("data-index")); }); ---

NikolayKuznetsov
Mon, 25 Apr 2016 18:25:26 GMT

--- <a href="#" class="info bg-blue swipeout-overswipe swipeout-close" data-index="51"> ---

dyeates
Mon, 25 Apr 2016 18:28:56 GMT

Yep, so I know I'm setting it, but it's not coming out the other end using --- $$(e.target).prop("data-index") ---

NikolayKuznetsov
Mon, 25 Apr 2016 18:34:27 GMT

try .attr(name) or .data(name)

dyeates
Mon, 25 Apr 2016 19:09:25 GMT

Thanks for the help Nikolay, but I can't get any to work. Have tried attr, prop, data and also dataset(). all return undefined apart from attire which returns null :-(

NikolayKuznetsov
Tue, 26 Apr 2016 05:47:37 GMT

Try to find correct path to data- with web inspector and console in desktop browser.

Hatem
Mon, 22 May 2017 05:28:19 GMT

To know available attributes and functions, you can do this: --- console.log(event); --- Then, you can add an "id" attribute to the "li" element and use it like this: --- $$('.swipeout').on('swipeout:deleted', function (event) { console.log(event); console.log(event.target); console.log(event.target.id); $$('#form_delete_' + event.target.id).submit(); }); ---