2012-11-03 29 views
23

Używam popovers twitter bootstrap,Dołączyć obsługi zdarzeń przycisku w twitter bootstrap popover

W popover dodaję przycisk,

muszę dołączyć click obsługi przycisku, ale sposób działania popover działa za każdym razem, gdy pokazuje, że usuwa i ponownie tworzy element, zamiast tylko pokazywać/ukrywać go, usuwając wszelkie funkcje obsługi zdarzeń, które skojarzyłem z tym przyciskiem.

Tworzę kilka przeglądarek z ich własną wersją przycisku, więc zastosowanie klasy do popover nie zadziała (chyba że wygeneruję inną klasę dla każdego: /), przycisk może lub nie mieć własny identyfikator, więc nie można zastosować identyfikatora.

Jak mogę zastosować procedurę obsługi zdarzeń do czegoś w treści popover bootstrap twitter?

+0

Masz dwie opcje. # 1: przywiąż go ponownie po otwarciu okna pop-up lub # 2 powiązaj go za pomocą delegowania zdarzeń. Co musi zrobić przycisk? –

+0

Wiele różnych rzeczy, niektóre z nich przesyłają formularze (przez js), niektóre zamykają popover, – Hailwood

Odpowiedz

35

miałem ten sam problem, i, w moim przypadku, $(body).on('click') obejście nie będzie działać, ponieważ aplikacja ma przyciski klikania lotta.

Wykonałem następujące czynności. W ten sposób możemy ograniczyć zakres zdarzenia delegowanego do tylko elementu nadrzędnego elementu popover.

$('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/

PS: Użyłem tej techniki w ramach Backbone.View w mojej aplikacji. Oto fragment kodu w Fiddle, w przypadku używasz tego w Backbone.js także ...: http://jsfiddle.net/dashk/PA6wY/

EDITED W Bootstrap 2.3, można określić pojemnika docelowego, który zostanie dodany do popover. Teraz, zamiast wykonywać lokalizator .parent(), można również wysłuchać zdarzeń specyficznie dla kontenera ... To może uczynić słuchacza jeszcze bardziej szczegółowym (Wyobraź sobie tworzenie DIV, który istnieje tylko po to, by zawierać popover).

+0

Świetna odpowiedź dla wersji wcześniejszych niż 2.3, używana dla wersji 2.1.1 i działała dobrze. – mccainz

26

To powinno wystarczyć. Będzie to dbać o wszelkich istniejących i przyszłych elementów przycisków utworzonych wewnątrz elementu z klasą .popover:

$('body').on('click', '.popover button', function() { 
    // code here 
}); 
+2

To zadziała tylko wtedy, gdy wszystkie przyciski będą działać tak samo – Hailwood

+0

Dobrze, przepraszam, właśnie zauważyłem ten punkt twój oryginalny wpis. Czy jest jakiś powód, dla którego nie możesz podać konkretnej klasy dla każdego popover? – manishie

+0

Świetna odpowiedź !!!! Szukałem tego przez wiele godzin :) – adamdehaven

0

spróbować

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, 
}); 
0
$('.btn-popover').parent().delegate('button#close-me','click', function(){ 
    alert('Hello'); 
}); 

Jeśli atrybuty danych są ustawione w html statycznej powyższa metoda działa dobrze. Dzięki :)

9

Tylko nieznacznie zaktualizować bardzo dobrą odpowiedź DashK: .delegate() został zastąpiony przez .on() z jQuery 1.7 (patrz here).

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

Zobacz jsfiddle tutaj: http://jsfiddle.net/smingers/nCKxs/2/

Mam też miał pewne problemy z łańcuchowym metody .on() do $ ('a.foo'); jeśli wystąpi taki problem, spróbuj dodać go do dokumentu, ciała lub html, np .:

$('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!'); 
}); 
+0

Opierając się na tej odpowiedzi w podobnym tonie, to pracował dla mnie, a także: '$ ('') popover a.foo ({ html. Prawdziwą, tytuł: 'Hello', umieszczenie:„dno ", treść:" ' }). Parent ("body"). On ("kliknij", "przycisk # close-me", function() { console.log ("kliknięcie przycisku Popover!"); }); ' – tofirius

1

Można wpaść w kłopoty, jeśli dodać bardziej złożoną strukturę zawartości popover za, na przykład zewnętrznego urządzenia. W tym przypadku powinno to wystarczyć.

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

Bardzo proste rozwiązanie, że pracował dla mnie jest:

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

Dlaczego to działa: Treść zasadzie popover nie ma żadnego słuchacza aż popover jest otwarty.

Po wyświetleniu okna Popover, bootstrap uruchamia swoje zdarzenie shown.bs.popover. Możemy dołączyć procedurę obsługi zdarzeń do tego zdarzenia do $(a.foo) przy użyciu metody jQuery on. Kiedy pojawi się popover, wywoływana jest funkcja handler (callback). W tym wywołaniu zwrotnym możemy dołączyć procedury obsługi zdarzeń do treści popover - na przykład: co się dzieje, gdy użytkownik kliknie ten przycisk wewnątrz popover.

Po zamknięciu okna pop-up dobrze jest usunąć wszystkie załączone procedury obsługi do zawartości popover. Odbywa się to za pomocą instrukcji obsługi hidden.bs.popover, która usuwa procedury obsługi za pomocą metody jQuery .off. Zapobiega to wywołaniu funkcji obsługi zdarzeń w popover dwa razy (i więcej) po ponownym otwarciu okna ...

+0

Byłoby dobrze, gdybyś mógł wyjaśnić ** dlaczego ** to działa. W przeciwnym razie, miła odpowiedź! – ArtOfCode

+0

Dzięki. Dodano wyjaśnienie, mam nadzieję, że to pomoże ;-) – mrtn

Powiązane problemy