6

W moim HTML Mam to w jednym z moich czasowniki modalne:Znajdź element, który zamknął modalne

<a href="#" class="clicker" data-dismiss="modal">Click</a> 

Ukrywa modal jeśli ten element jest kliknięty.

Jednakże chcę móc uzyskać element, który zamknął modalne w jQuery, jak:

$('#myModal').on('hidden.bs.modal', function(event) 
{ 
    var invoker = $(event.relatedTarget); 
}); 

Ale to nie działa. relatedTarget wydaje się działać tylko dla show.bs.modal i shown.bs.modal (as per the documentation).

Jak mogę uzyskać element, który spowodował zamknięcie modala w wydarzeniu hidden.bs.modal?

+1

Nie masz go w 'event.target'? –

+0

Stworzyłem codepen do testowania rozwiązania @AllanStepps, ale event.target wskazuje na cały modal, a nie na element kliknięty. –

+1

Co z 'event.currentTarget'? (= Węzeł, do którego dołączono detektor zdarzeń.) Https://developer.mozilla.org/en-US/docs/Web/Events/click –

Odpowiedz

1

I have made a Pen to show how to achieve the desired result. Jak widać w tym przykładzie, zdarzenia zainicjowane przez Bootstrap nie dzielą dokładnie tego elementu, który został użyty do zamknięcia modala. Odwołują się, jako .target i .currentTarget, do całego samego elementu modalnego.

Tak więc, aby uzyskać element, który został kliknięty, aby zamknąć modal, użyłem funkcji selektora jQuery. Tak:

$("[data-dismiss='modal']").click(function() { 
    $("#data-dismiss").html('#'+ $(this).attr('id')); 
}); 

W tym przypadku, jQuery poszukuje dla każdego elementu, który ma atrybut data-dismiss z wartością modal i dołączanie do tych elementów znalezieniu funkcji wywołania zwrotnego, który jest wykonywany, gdy są one kliknięty.

Jak widać w przykładzie, który zrobiłem, istnieją dwa przyciski z tym atrybutem. Jedno w nagłówku modalnego za:

<button id="header-close-button" type="button" 
     class="close" data-dismiss="modal" aria-label="Close"> 
    <span aria-hidden="true">&times;</span> 
</button> 

a drugi w stopce modalnego za:

<button id="footer-close-button" type="button" 
     class="close" data-dismiss="modal" aria-label="Close"> 
    <span aria-hidden="true">Close</span> 
</button> 

Oba te przyciski mają różne identyfikatory, że mogę ustawić, aby pokazać, że można sprawdzić, który z nich właśnie został kliknięty - poprzez $(this).attr('id') w funkcji wywołania zwrotnego dołączonej do zdarzenia kliknięcia.