jQuery mobile listview multiple click event -
i fill list dynamically, , after on click have multiple calls of event. 1st time repeated 1 time, 2nd time 2 times, 3rd time 3 times, etc...
first, more problem can found in other answer: jquery mobile: document ready vs page events
prevent multiple event binding/triggering
because of interesting jqm loading architecture, multiple event triggering constant problem. example, take @ code snipet:
$(document).on('pagebeforeshow','#index' ,function(e,data){ $(document).on('click', '#test-button',function(e) { alert('button click'); }); });
working jsfiddle example: http://jsfiddle.net/gajotres/ccfl4/
each time visit page #index click event going bound button #test-button. there few ways prevent problem:
solution 1:
remove event before bind it:
$('#index').live('pagebeforeshow',function(e,data){ $('#test-button').die().live('click', function(e) { alert('button click'); }); });
working jsfiddle example: http://jsfiddle.net/gajotres/k8ymg/
in case have different events bound object:
$('#index').live('pagebeforeshow',function(e,data){ $('#test-button').die('click').live('click', function(e) { alert('button click'); }); });
solution 2:
use jquery filter selector, this:
$('#carousel div:event(!click)').each(function(){ //if click not bind #carousel div });
because event filter not part of official jquery framework can found here: http://www.codenothing.com/archives/2009/event-filter/
in nutshell, if speed main concern solution 2 better solution 1.
solution 3:
a new one, easiest of them all.
$(document).on('pagebeforeshow', '#index', function(){ $(document).on('click', '#test-button',function(e) { if(e.handled !== true) // prevent event triggering more once { alert('clicked'); e.handled = true; } }); });
working jsfiddle example: http://jsfiddle.net/gajotres/yerv9/
tnx sholsinger solution: http://sholsinger.com/archive/2011/08/prevent-jquery-live-handlers-from-firing-multiple-times/
more info
if want find more problem take @ article, working examples included.
Comments
Post a Comment