Bootstrap Popover, .click fängt nicht Taste in popover

Question

Zunächst einmal, eine Geige des Problems: jsfiddle.net

ich popover benutzt und es ist Inhalt HTML ist ein Knopf mit Klasse „click_me“. Ich habe jquery auf einen Klick auf "click_me" zu hören und es sollte einen Alarm auslösen. Allerdings nicht. Fehle ich etwas?

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

.click() wird nur für Elemente arbeiten, die vorhanden sind, auf Last, die Sie verwenden müssen, um auf()

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

Answer 2

Ihr Problem besteht darin, dass Sie ein Ereignis an ein Element anhängen, das dieses Ereignis nicht empfangen kann. Sie sollten das Ereignis an ein Elternelement anhängen, dann können Sie nach dem Element filtern. Auf diese Weise ist es egal, wann Ihr anklickbares Element angezeigt wird, es funktioniert.

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

Auch wenn dies zu tun, befestige es nicht zu einem Elternteil, dass der Baum zu hoch ist. Sie möchten es an das nächste mögliche Elternelement anhängen. Wir brauchen kein Klick-Ereignis auf etwas wie document, weil es eine gute Idee ist, genau zu bestimmen, welche Elemente dieses Ereignis erhalten. Wenn Sie es an document anhängen, bedeutet dies, dass jedes Element, das die Klasse click_me hat, anklickbar ist und auf denselben Code reagiert. Wenn Sie unterschiedliche Funktionen in verschiedenen Schaltflächen haben möchten, können Sie dies nicht tun, da sie alle auf den gleichen Code antworten, der an document angehängt ist.

Btw hier ist Ihre fiddle.

Answer 3

sollten Sie versuchen, die folgenden:

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

Wenn das DOM bereit ist, bist du Knopf ist es noch nicht erstellt, dies zu tun, jedes Mal wenn die popover steigt Sie das Ereignis auf Ihre erstellten Schaltfläche behandelt.

Answer 4

Verwendung: show.bs.pover - Dieses Ereignis wird sofort ausgelöst, wenn die show-Instanzmethode aufgerufen wird.

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