Bootstrap: `activate.bs.scrollspy` event not firing

[njj]

Hi all, it appears that the activate.bs.scrollspy event is not firing in v4. I've tried several different scenarios, yet no events fire. An easy test is pulling up the console on the v4 page with the scrollspy demo and adding the event, note it doesn't fire.

Operating system and version: Mac OSX
Browser and version: Chrome

http://jsbin.com/jucaxamanu/edit?js,console,output

[cvrebert]

@njj Please give us the information requested in https://github.com/twbs/bootstrap/blob/master/ISSUE_TEMPLATE.md

[njj]

@cvrebert Done.

[blamejen]

I am having a same problem. Any solutions yet?

[steve-32a]

It's getting fired on window: http://jsbin.com/jetojoqive/1/edit?js,console,output

[thepurist]

@njj @blamejen I had the same issue when changing from v3 to V4Alpha. Try changing :

$(document).ready(function () {
$('#main-nav').on('activate.bs.scrollspy', function () {
console.log('sup')
})
})

to

$(document).ready(function () {
$(window).on('activate.bs.scrollspy', function () {
console.log('sup')
})
})

ie: don't target by ID, use $(window).on(...) . Works for me now.

[murraybiscuit]

Surely this _should_ pass the target with the event (i.e. the element assigned the .active class)? Well, that's what I'm trying to achieve. With the current state of affairs, the event passes window as the event.target, which isn't going to be very helpful to most people.

[murraybiscuit]

Above fork works for both js init & data-attribute init of scrollspy. Event propagates off the initially supplied scrollspy target, with event.currentTarget = original target element; and event.target = changed nav link element. You can play with it on the following jsbin. I started off replacing the current activate event and ended up creating a new event (navchange). So it should be backward compatible.

Edt: Sorry, above commits are a bit of a mess. I can cherry pick to a new branch and do PR if needed.

[Johann-S]

I don't see any issue here because the event is triggered by the object which create the scrollspy.
Instead of if you create your Scrollspy on the body element the event will be triggered by the window.

To illustrate what I said for example :

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div id="myScrollspy" data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

The event will be triggered by #myScrollspy here

[mmilano]

Re-opening the inquiry about this topic.

The conclusion noted by @johann-S may make a sense of sorts, since it appears to align with underlying assumption of the original inquiry (and with my own, which led to a batch of searching to find this answer).

However, the BS4 documentation still expresses – by most any reasonable reading – that the event listening should be done on the same element that had been activated for scrollspy.

https://getbootstrap.com/docs/4.0/components/scrollspy/#events
'''
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
// do something…
})
'''

So, putting aside a question about where the event SHOULD occur when activated on document.body, I think that the docs are incorrect about the reference example given, which may be why people are confused.

This can be solved by some additional comments, using one of those callout-info sections. Something like this:

Info: when scrollspy is activated on the top-level document.body, the Events must be monitored using the window object, not the same element originally spied on.

'''
$(window).on('activate.bs.scrollspy', function (e) {
// do something…
})
'''

[justindocanto]

I shouldn't require googling, landing on a stack overflow answer, and finding a closed ticket to learn that the documentation is not accurate.

Either the event should happen on the body element or the documentation should be more clear because this example is incorrect when you scrollspy the body.

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () { // do something… })

I'm assuming updating the documentation would be easier.