Bootstrap Popover nie .Kliknij łapania przycisk wewnątrz popover

Question

pierwsze, ryba problemu: jsfiddle.net

Używam popover, a jego zawartość jest html, przycisk z klasy "click_me". Mam jquery, aby odsłuchać kliknięcie "click_me" i powinien wysłać alert. Jednak tak się nie dzieje. Czy czegoś brakuje?

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> 

Answer 1

.Kliknij() działa tylko dla elementów, które są obecne na obciążenia trzeba użyć ON()

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

Answer 2

Twoim problemem jest dołączanie wydarzenia do elementu, który nie jest gotowy na przyjęcie tego wydarzenia. Powinieneś dołączyć wydarzenie do elementu nadrzędnego, a następnie możesz filtrować element. W ten sposób nie ma znaczenia, kiedy pojawi się klikalny element, to zadziała.

<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!'); 
}); 

Również podczas wykonywania tego nie dołączaj go do rodzica, który jest zbyt wysoko na drzewie. Chcesz dołączyć go do najbliższego możliwego elementu nadrzędnego. Nie musimy mieć zdarzenia kliknięcia na coś podobnego do document, ponieważ dobrze jest określić, które elementy otrzymają to wydarzenie. Dołączenie go do document oznacza, że ​​każdy element, który ma klasę click_me, będzie mógł kliknąć i odpowiedzieć na ten sam kod. Jeśli chcesz mieć różne funkcje w różnych przyciskach, nie możesz, ponieważ wszystkie odpowiadają na ten sam kod dołączony do document.

Btw tutaj jest twój fiddle.

Answer 3

Należy spróbować wykonać następujące czynności:

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!'); 
     }); 
    }); 
}); 

Gdy DOM jest gotowy, jesteś przycisk nie jest jeszcze utworzony, w ten sposób, za każdym razem popover wznosi będzie obsługiwać zdarzenie na utworzonego przycisku.

Answer 4

Użyj: show.bs.popover - To zdarzenie jest wywoływane natychmiast po wywołaniu metody show show.

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