web-dev-qa-db-fra.com

Bootstrap Popover, .Cliquez pas attraper le bouton à l'intérieur de popover

Tout d’abord, le violon du problème: jsfiddle.net

J'utilise un popover, et son contenu est HTML, un bouton avec la classe "click_me". J'ai jQuery à l'écoute pour un clic sur "click_me" et il devrait lancer une alerte. Cependant, ce n'est pas le cas. Est-ce que je manque quelque chose?

JS:

jQuery(document).ready(function($) {

$('.demo_button').click(function () {
    $(this).popover({
                html: true,
                trigger: 'manual',
                placement: 'right',
                content: function () {
                    var $buttons = $('#popover_template').html();
                    return $buttons;
                }
    }).popover('toggle');
});

$('.click_me').click(function() {
    alert('it works!');
});

});

HTML:

<button class="btn btn-primary demo_button">Click here</button>

<div id="popover_template">
    <button class="btn click_me">Make Alert</button>
</div>
jqueryhtmltwitter-bootstrappopover
26
Tim Habersack

.click () ne fonctionnera que pour les éléments présents au chargement que vous devez utiliser sur ()

$(document).on("click", ".click_me", function() {
    alert('it works!');
});
50
Stefan

Votre problème est que vous attachez un événement à un élément qui n'est pas prêt à recevoir cet événement. Vous devez attacher l'événement à un élément parent, vous pouvez alors filtrer pour l'élément. De cette façon, peu importe quand votre élément cliquable apparaît, cela fonctionnera.

<div class="container"><br />
    <button class="btn btn-primary demo_button">Click here</button>

    <div id="popover_template">
        <button class="btn click_me">Make Alert</button>
    </div>
</div>

 $('.container').on("click", ".click_me", function() {
     alert('it works!');
 });

De même, ne le connectez pas à un parent trop haut dans l’arbre. Vous voulez l'attacher à l'élément parent le plus proche possible. Nous n'avons pas besoin d'avoir un événement clic sur quelque chose comme document car c'est une bonne idée de spécifier les éléments qui obtiendront cet événement. Si vous le rattachez à document, tous les éléments de la classe click_me seront cliquables et répondront au même code. Si vous souhaitez utiliser des fonctionnalités différentes dans différents boutons, vous ne pouvez pas, car ils répondent tous au même code associé à document.

Btw voici votre violon .

3
Jonny Sooter

Vous devriez essayer ce qui suit:

jQuery(document).ready(function($) {

    $('.demo_button').click(function () {
        $(this).popover({
                html: true,
                trigger: 'manual',
                placement: 'right',
                content: function () {
                    var $buttons = $('#popover_template').html();
                    return $buttons;
                }
         }).popover('toggle');
         $('.click_me').off('click').on('click', function() {
             alert('it works!');
         });
    });
});

Lorsque le DOM est prêt, votre bouton n'est pas encore créé. Ainsi, chaque fois que le popover augmente, vous gérez l'événement sur le bouton créé.

2
Markus Fantone

Utilisez: Show.bs.popover - Cet événement se déclenche immédiatement lorsque la méthode show instance est appelée.

$('#myPopover').on('hidden.bs.popover', function () {
  // bind your button click event here
})
0
sra