JQuery Mobile Klapp-widget reduzieren und erweitern Sie die Ereignisse, die nicht arbeiten
Habe ich eine Seite dynamisch erstellt JQuery 1.3.1 Reduzierbare Elemente (nicht in einem accordion set), und ich bin versucht zu retten, den erweiterten oder reduzierten Zustand der einzelnen Artikel. Die zusammenklappbare Elemente funktionieren, ohne Befestigung, alle Handler. Mein code zum anfügen der Handler ist hier, das nenne ich in pagebeforeshow
(ich habe versucht, in pageshow
auch):
function bindCollapsibleHistoryHandlers(){
function getHandler(field, value){
var handler = function(event, ui){
var element = event.target.id;
var id = (element.split('-'))[1];
var status = window.mam_history.status('meetings', id);
if (null == status){
status = { "open": false, "note_open": false, "dist_open": false };
}
status[field] = value;
var new_status = null;
window.mam_history.status('meetings', id, status);
return true;
}
return handler;
}
$('.mtg_item').off('collapsiblecollapse');
$('.mtg_item').on('collapsible', getHandler('open', false));
$('.mtg_item').off('collapsibleexpand');
$('.mtg_item').on('collapsibleexpand', getHandler('open', true));
$('.dist_info').off('collapsiblecollapse');
$('.dist_info').on('collapsiblecollapse', getHandler('dist_open', false));
$('.dist_info').off('collapsibleexpand');
$('.dist_info').on('collapsibleexpand', getHandler('dist_open', true));
}
Einer der HTML-Elemente sieht im Chrome inspector:
Entsprechend der JQuery Mobile 1.3.1 Dokumentation, die Ereignisse um die Falle collapsiblecollapse
und collapsibleexpand
. Wenn ich versuche über diesen, die event-Handler nie aufgerufen werden. Auf der Suche im web habe ich ersetzt diese Ereignisse mit collapse
und expand
. Mit diesen, wäre die Ereignisprozedur wird aufgerufen, wenn die zusammenklappbare geklickt wurde, aber die Klapp-widget würde nicht zusammenbrechen oder erweitern Sie entweder vor oder nach der hf ran. Es ist nicht nur ein optisches Problem, da der Zustand des zusammenklappbaren als gelesen mit .collapsible('option', 'collapsed')
auch nicht geändert hat.
Innerhalb der handler-ich habe versucht, verschiedene Kombinationen, hinzufügen oder entfernen die ui-collapsible-collapsed
Klasse oder die Einstellung der collapsible
option vor einem .trigger('create')
, und auch die Auslösung der collapsiblecollapse
und collapsibleexpand
im inneren der hf (wenn es gebunden wurde, zu collapse
und expand
natürlich). Entfernen der .off()
Linien kein Unterschied gemacht (kann ich mir nicht vorstellen, warum Sie würde). Nichts, was ich bisher ausprobiert habe, verursachen die zusammenklappbare zu reduzieren bzw. zu erweitern, wenn Sie angeklickt werden, wenn die Prozedur ausgeführt wird, während Sie gefesselt auf collapse
oder expand
. Es spielt keine Rolle, was der code tatsächlich in den handler, oder ob ich einen data-collapsed
Attribut in der <div>
tag zu beginnen oder nicht.
So es scheint, gibt es etwas, was ich bin fehlt, und ich würde schätzen jede Hilfe zu sehen, die Fehler meiner Wege.
- Können Sie setup ein jsfiddle, möchte prüfen, html-codes, die nach dem anfügen?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Lösung
Beispiel: http://jsfiddle.net/Gajotres/3pCQh/
Als Sie merkt richtige Art und Weise zu erkennen, zusammenklappbar Zustand zu verwenden, reduzieren und erweitern Sie die Veranstaltung (Informationen in der offiziellen Dokumentation ist falsch). Auch bei der Bindung Veranstaltungen in
jQuery Mobile
, speziell mit dynamisch erzeugten Objekten ist es wichtig, verwenden Sie die Delegierte verbindlich, wie diese:Diesem Beispiel egal ist, wenn ein Objekt vorhanden ist oder nicht vorhanden ist. Ereignis gebunden zu sein, um Dokument-Objekt, und es wird sich ausbreiten, um das richtige Ziel nur, wenn/wenn Objekt wird angeboten in der
DOM
.Paar Notizen
Wenn Sie die Verwendung der richtigen page-Ereignis (wie
pageinit
) brauchen Sie nicht zu verwendenoff
zu lösen ein Ereignis aus.Pageinit
wird nur einmal ausgelöst, genau wie Dokument bereit, wenn verwendet mit klassische jQuery.Es gibt eine weitere Sache. Wenn Sie mehrere
HTML
Seiten, die Sie brauchen, vorsichtig zu sein mit Ihr javascript. Wenn jQuery Mobile lädt zusätzlicheHTML
Seiten lädt es nurBODY
Inhalte, so dass alles in einemHEAD
, werden verworfen. Dies könnte auch der Grund sein, warum dein code Beispiel ist nicht ausgeführt. Lösungen zu diesem problem können gern HIER.