Bouton mobile jQuery à l’intérieur de l’en-tête pliable
J’apprécierais vraiment si quelqu’un pouvait m’aider. J’essaie de créer de manière dynamic un bloc compressible avec jQuery mobile 1.2 Beta (à l’aide de jQuery 1.7.1).
Maintenant, j’ai le problème que je veux avoir un bouton dans un en-tête réductible et que tout fonctionne bien, mais lorsque je clique sur le bouton, l’événement de clic que je lui ai défini n’est pas déclenché, mais le bloc est décomposé ou réduit.
$('#main').append('' + '' + header + ': ' + val.pflichtBezeichnung + ' (' + val.Intervall + ' - ' + val.IntModus + ') ' + val.pflichtNummer + '.' + val.pflichtZusatz + '
' + '' $("#ok").live('click', function () { alert("ok"); }); Que dois-je faire pour obtenir l’événement click du bouton?
Merci de votre aide!
- Comment faire apparaître un menu flottant après avoir fait défiler un certain point?
- En-tête collant – Défilement – CSS / jQuery
- Les en-têtes de demande d’autorisation Ajax échouent encore et encore
- Réduire la hauteur de l’en-tête par la valeur scrollTop
- Comment rendre uniquement le texte spécifique cliquable sur l’en-tête de l’accordéon – jquery?
Tout d’abord, vous devez savoir que .live a été déconseillé en faveur de on .
Cela dit, pour comprendre ce qui se passe ici, vous devez comprendre le fonctionnement de la délégation d’événements en général et live en particulier. Lorsque vous utilisez la délégation d’événements, vous liez votre événement à un niveau supérieur dans le DOM (un élément parent), puis parce que les événements bouillonnent. vous vérifiez l’événement d’origine pour voir s’il correspond au sélecteur spécifié.
La méthode .live fonctionne en liant l’événement au document (elle est donc toujours liée à un élément parent), puis lorsqu’un événement est renvoyé au document il vérifie s’il correspond au sélecteur spécifié. Le problème dans votre cas est que quelque chose (probablement l’en -tête de collapisple ) engloutit l’événement click afin qu’il n’atteigne jamais le document.
La solution est assez simple: vous liez directement au bouton ou déléguez à un niveau inférieur du DOM, quelque part où votre événement parviendra.
Par exemple
$('#inner_header_' + identifier).on('click', '#ok', function(e) { alert('ok'); });
Si vous ne voulez pas que l’en-tête se développe et se réduise lorsque vous cliquez sur le bouton, arrêtez simplement l’événement, ce que vous pouvez faire à l’aide de la méthode stopPropagation ()
Par exemple
$('#inner_header_' + identifier).on('click', '#ok', function(e) { alert('ok'); e.stopPropagation() });