shown.bs.dropdown Related target

[DaGLiMiOuX]

Hi there!

Im using Bootstrap v3.3.5 and I'm having some troubles using the dropdown menu and accessing to the dropdown events. According to documentation (http://getbootstrap.com/javascript/#dropdowns-events) all dropdown events (show, shown, hide and hidden) has a relatedTarget property to access the anchor that fired the event. It works perfect in show and hide events, but shows undefined in shown and hidden events.

Is there an error in the documentation or did you miss to put that property when the event was built?

Here is an example of my code:

$('.dropup').on('show.bs.dropdown', function(e){
    console.log(e.relatedTarget);
});

$('.dropup').on('shown.bs.dropdown', function(e){
    console.log(e.relatedTarget);
});

$('.dropup').on('hide.bs.dropdown', function(e){
    console.log(e.relatedTarget);
});

$('.dropup').on('hidden.bs.dropdown', function(e){
    console.log(e.relatedTarget);
});

And their results:

Thanks in advance.

Regards,
Diego.

PS: I'm using Windows 7 with Chrome 43.0.2357.132 m

EDIT: I've been checking all events objects through console.log(e) and they all have the same properties with exactly same values, only "timestamp" property is the one that is not the same in all event objects, and I found that hidden and shown events has not defined the relatedTarget property, but in the bootstrap.js file there is this piece code:

$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
if (e.isDefaultPrevented()) return
$this.attr('aria-expanded', 'false')
$parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)

relatedTarget is theorically sent, correct me if I'm wrong, in both hide events and the same where show events are thrown.

[DaGLiMiOuX]

Solved Bootstrap calls hide and show events like this:

$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
$parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))

But for some reason it calls hidden and shown events like this:

$parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
$parent.removeClass('open').trigger('shown.bs.dropdown', relatedTarget)

Why would you do that? This solved my problem and probably you have to add it into new Bootstrap versions:

$parent.removeClass('open').trigger(e = $.Event('hidden.bs.dropdown', relatedTarget))
$parent.removeClass('open').trigger(e = $.Event('shown.bs.dropdown', relatedTarget))

According to jQuery Event, the event never gets the relatedTarget parameter doing it like you did it. You need to call the jQuery Event to send the extra parameter.