JavaScript [qjuery mobile] nach Popup, Code wird mehrfach ausgeführt

ismon

Lieutenant
Dabei seit
Dez. 2006
Beiträge
596
Guten Tag zusammen,

ich rätsel jetzt schon eine halbe Ewigkeit an folgendem Problem.

Ich stelle eine Liste von Einträge über jquery mobile da.
Mit einem Swipe über einen Eintrag soll der entsprechende Eintrag entfernt werden.
Dazu öffnet sich nach dem Swipe ein Popup wo der User "OK" drücken muss.
Hat der User "OK" geklickt wird das Element aus der Liste entfernt und es soll weiterer Code ausgeführt werden (in meinem Beispiel nur ein alert()).

Das Funktioniert Grundsätzlich auch alles. Es gibt nur ein Problem:
Wenn ich das erste Element aus der Liste entferne läuft alles wie es soll. Das Element wird gelöscht und der folgende Code (alert) wird ausgeführt.
Wenn ich dann allerdings ein weiteres Element löschen wird diese auch korrekt gelöscht aber das nachfolgende Code wird zweimal ausgeführt (also zwei alert).
Wenn ich dann noch ein Element lösche wird der Code dreimal ausgeführt usw.

Hier ein Auszug aus dem Code:

HTML:

HTML:
<div id="confirm" class="ui-content" data-role="popup" data-theme="none">
	<div class="ui-grid-a">
			<div class="ui-block-a">
			<a id="yes" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-rel="back">Mark as read?</a>
			</div>
	</div>
</div><!-- /popup -->
JavaScript:

Code:
$( document ).on( "pageinit", "#feed", function() {
// Swipe to remove list item
	$( document ).on( "swiperight", "#entrielist li.ui-li", function( event ) {
		$.event.special.swipe.horizontalDistanceThreshold=120;
	
		var listitem = $( this ),
		// These are the classnames used for the CSS transition
		dir = event.type === "swipeleft" ? "left" : "right",
		// Check if the browser supports the transform (3D) CSS transition
		transition = $.support.cssTransform3d ? dir : false;
		
		confirmAndDelete( listitem, this );
	});

});

Code:
function confirmAndDelete( listitem,li_elemt, transition ) {
	 
var curren_li_elemt=li_elemt.getAttribute("id");
 // Highlight the list item that will be removed
listitem.addClass( "ui-btn-down-d" );	
$( "#confirm" ).popup( "open" );
	
// Proceed when the user confirms
$( "#confirm #yes" ).on( "click", function() {

	listitem.remove();
	$( "#entrielist" ).listview( "refresh" );
	alert("Dieser Code wird mehrfach ausgeführt");
		

});

}

Ich hoffe das mir jemand einen Tipp geben kann.

Danke schon mal.
 

Lawnmower

Fleet Admiral
Dabei seit
Mai 2011
Beiträge
11.782
hmm folgende Theorie

Code:
$( document ).on( "swiperight", "#entrielist li.ui-li", function( event ) {}
wird die Funktion registriert was passieren soll wenn swiperight auftritt.
Ich nehme nun an dass jedesmal wenn Du "swiperight" machst dass das erneut registriert, sprich am Schluss hast Du für jeden ausgeführten swiperight einen weiteren Aufruf registriert (gilt ja für #entrielist li.ui-li) der sich dann aufsummiert.

Hänge doch mal ein console.log('swiperight') oder ein alert('swiperight') vor
Code:
$.event.special.swipe.horizontalDistanceThreshold=120;
dann müsste das ja auch jeweils x+1 Mal ausgeführt werden.
 
Zuletzt bearbeitet:

ismon

Lieutenant
Ersteller dieses Themas
Dabei seit
Dez. 2006
Beiträge
596
OK, ich würde deine Theorie gerne bestätigen. :-)
Wie könnte ich das anders lösen?
Ergänzung ()

Hm das scheint es nicht zu sein.
Der Code den ich vor
Code:
$.event.special.swipe.horizontalDistanceThreshold=120;
ausführe, z.B. alert("swiperight") wird immer nur einmal ausgeführt.
 

Die Fi

Lt. Junior Grade
Dabei seit
Aug. 2005
Beiträge
298
Code:
function confirmAndDelete( listitem,li_elemt, transition ) {
	 
var curren_li_elemt=li_elemt.getAttribute("id");
 // Highlight the list item that will be removed
listitem.addClass( "ui-btn-down-d" );	
$( "#confirm" ).popup( "open" );
	

}
Kein Ahnung, aber könnte es daran liegen dass du listitem der Class "ui-btn-down-d" hinzufügts und er für jedes hinzugefüge listitem die popup aufruft.
 

ismon

Lieutenant
Ersteller dieses Themas
Dabei seit
Dez. 2006
Beiträge
596
Ich glaube ich habe das Problem gefunden. Es war wohl wie von dir vermutet. Allerdings nicht mit
Code:
$( document ).on( "swiperight", "#entrielist li.ui-li", function( event ) {}
sondern mit

Code:
$( "#confirm #yes" ).on( "click", function() {}
Nach einem
Code:
$( "#confirm #yes" ).off();
nach dem auszuführenden Code scheint es zu funktionieren.

Ich teste das mal weiter.

Danke auf jeden Fall schonmal!
 
Top