event-handling - Joindre gestionnaire d'événement de bouton twitter bootstrap liste

35

J'ai eu le même problème, et, dans mon cas, le $(body).on('click') solution de contournement ne fonctionne pas, depuis que la demande a lotta cliquez sur les boutons.

Je n'ai la suite à la place. De cette façon, nous pouvons limiter la portée de l'événement délégué à juste le parent de l'élément de liste.
```
$('a.foo').popover({
    html: true,
    title: 'Hello',
    placement: 'bottom',
    content: '<button id="close-me">Close Me!</button>'
}).parent().delegate('button#close-me', 'click', function() {
    console.log('World!');
});
```
JS Fiddle: http://jsfiddle.net/dashk/5Yz7z/

P. S. j'ai utilisé cette technique au sein d'une Backbone.View dans mon application. Voici l'extrait du code de Violon, dans le cas où vous êtes en utilisant ce dans Backbone.js ainsi...: http://jsfiddle.net/dashk/PA6wY/

ÉDITÉ
Dans le Bootstrap 2.3, vous pouvez spécifier un conteneur cible qui liste sera ajouté. Maintenant, au lieu de faire de la .parent() de localisation, vous pouvez également écouter des événements spécifiquement pour le conteneur... Cela peut rendre l'auditeur encore plus spécifiques (Imaginer de créer une DIV qui existe uniquement pour contenir la liste.)
- Grande réponse pour les versions antérieures à la 2.3, utilisé pour ce 2.1.1 et il a bien fonctionné.
InformationsquelleAutor DashK
26

Cela devrait le faire. Cela va prendre soin de tous les actuels et futurs bouton éléments créés à l'intérieur d'un élément avec l' .liste classe:
```
$('body').on('click', '.popover button', function () {
    //code here
});
```
- Cela ne fonctionne que si je veux que tous les boutons pour faire la même chose
- Bon, je suis désolé, je viens de remarquer que le point dans votre post original. Est-il une raison pour laquelle vous ne pouvez pas donner une classe spécifique à chaque liste?
- Super réponse!!!! J'ai cherché pendant des heures 🙂
InformationsquelleAutor manishie
10

Juste à un peu de mise à jour DashK's très bonne réponse: .délégué() a été remplacée par .sur() de jQuery 1.7 (voir ici).
```
$('a.foo').popover({
    html: true,
    title: 'Hello',
    placement: 'bottom',
    content: '<button id="close-me">Close Me!</button>'
}).parent().on('click', 'button#close-me', function() {
    console.log('World!');
});
```
Voir jsfiddle ici: http://jsfiddle.net/smingers/nCKxs/2/

J'ai aussi eu quelques problèmes avec le chaînage de l' .sur() la méthode de $("une.foo'); si vous rencontrez un tel problème, essayez de l'ajouter au document, le corps, ou html, par exemple:
```
$('a.foo').popover({
    html: true,
    title: 'Hello',
    placement: 'bottom',
    content: '<button id="close-me">Close Me!</button>'
});

$('body').on('click', 'button#close-me', function() {
    console.log('World!');
});
```
- S'appuyant sur cette réponse dans une veine similaire, cela a fonctionné pour moi, en tant que bien: $('a.foo').popover({ html: true, title: 'Hello', placement: 'bottom', content: '<button id="close-me">Close Me!</button>' }).parents('body').on('click','button#close-me',function(){ console.log('Popover button clicked!'); });
InformationsquelleAutor smingers
9

Solution très simple qui a fonctionné pour moi est:
```
//suppose that popover is defined in HTML
$('a.foo').popover(); 

//when popover's content is shown
$('a.foo').on('shown.bs.popover', function() {
    //set what happens when user clicks on the button
    $("#my-button").on('click', function(){
        alert("clicked!!!");
    });
});

//when popover's content is hidden
$('a.foo').on('hidden.bs.popover', function(){
    //clear listeners
    $("#my-button").off('click');
});
```
Pourquoi cela fonctionne:
Fondamentalement, liste du contenu n'a pas d'écouteur jusqu'à ce que la liste est ouverte.

Lorsque la liste est affichée, bootstrap feux de son événement shown.bs.popover. Nous pouvons associer un gestionnaire d'événement sur cet événement pour $(a.foo) à l'aide de jQuery on méthode. Donc, lorsque la liste est affiché, le gestionnaire (rappel) la fonction est appelée. Dans cette fonction de rappel, nous pouvons joindre les gestionnaires d'événements pour le contenu de la liste - par exemple: ce qui se passe lorsque l'utilisateur clique sur ce bouton à l'intérieur de la liste.

Après la liste est fermée, c'est une bonne idée de supprimer tous les gestionnaires de la liste du contenu. Cela se fait via hidden.bs.popover gestionnaire, qui supprime les gestionnaires avec jQuery .off méthode. Cela empêche les gestionnaires d'événements à l'intérieur de la liste à être appelé deux fois (et plus) lorsque la liste est à nouveau ouvert...

InformationsquelleAutor mrtn

Vous pouvez avoir des ennuis si vous ajoutez de structure plus complexe dans la liste du contenu, par exemple un composant externe. Pour ce cas, cela devrait faire l'affaire.

var content = $('<button>Bingo?</button>');
content.on('click', function() {
    alert('Bingo!')
});

$('a.foo').popover({
    html: true,
    content: content
}).on('hidden.bs.popover', function() {
    content.detach(); # this will remove content nicely before the popover removes it
});

InformationsquelleAutor Patrik Šimek

essayer cette

var content = function() {
    var button = $($.parseHTML("<button id='foo'>bar</button>"));
    button.on('click', '#foo', function() {
        console.log('you clicked me!');
    } );
    return button;
};

$( '#new_link' ).popover({
    "html": true,
    "content": content,
});

InformationsquelleAutor wahhzu

0
```
$('.btn-popover').parent().delegate('button#close-me','click', function(){
  alert('Hello');
});
```
Si les données attributs sont définis dans la page html statique la méthode ci-dessus fonctionne très bien. Merci 🙂

InformationsquelleAutor Sandeep

Vous devez vous connecter pour publier un commentaire.