javascript - How to handle flow of different events in nested buttons of jQuery mobile listview elements? -

javascript - How to handle flow of different events in nested buttons of jQuery mobile listview elements? -

in jquery mobile have listview button-functionality. within every single list-button have different additional buttons in jsbin or code:

<ul data-role="listview"> <li> <div class="infos"> <h3 class="ui-li-heading">acura</h3> <p class="li-info ui-li-desc">model-description</p> </div> <div class="buttons" data-role="controlgroup" data-type="horizontal"> <a data-role="button" data-mini="true" id="button_yes">yes</a> <a data-role="button" data-mini="true" id="button_no">no</a> </div> </li> </ul>

i need have next functionality in construct:

click on listbutton (li-element in listview) toggles active state click on 'inner buttons' trigger seperate methods (not toggling active state of parent li-button) taphold on listbutton (li-element) shows/hides additional buttons

my current js-construct is

var taptimer, istaphold = false; var onlistbuttonclick = function($target){ console.log('clicked li'); if($target.hasclass('active')){ $target.removeclass('active'); } else{ $target.addclass('active'); } }; var toggleshowhidebuttons = function(){ if($('.buttons').is(':visible')){ $('.buttons').hide(); } else{ $('.buttons').show(); } }; var onmobiledevicevmouseupdown = function(event){ var $target = $(event.currenttarget); if(event.type === 'vmousedown') { console.log('down'); taptimer = settimeout(function () { istaphold = true; console.log('this taphold'); toggleshowhidebuttons(); }, 1000); } else if (event.type === 'vmouseup'){ console.log('up'); cleartimeout(taptimer); if (!istaphold) { //this tap, not tap-hold onlistbuttonclick($target); console.log('this click'); } istaphold = false; } event.preventdefault(); event.stopimmediatepropagation(); }; var onyesbuttonclick = function(event){ console.log('clicked yes'); event.preventdefault(); event.stopimmediatepropagation(); }; var onnobuttonclick = function(event){ console.log('clicked no'); event.preventdefault(); event.stopimmediatepropagation(); }; $('ul li').on('vmousedown vmouseup', onmobiledevicevmouseupdown); $('#button_yes').on('vclick', onyesbuttonclick); $('#button_no').on('vclick', onnobuttonclick);

at moment problem can't click on inner buttons without triggering activation-toggle of parent listbutton. there way realize behaviour in different way?

thnx!

javascript jquery jquery-mobile javascript-events taphold