Solved - SpyScroll not updated when i loaded new element from AJAX

[farizsofyan-inmagine]

Great and simple plugin :D

here is my case, i have one class at first, then i loaded new element, but the scrollspy not updated. My new element didnt counted as scrollspy element.
Any idea how to get this working?

Thanks in advance

[farizsofyan-inmagine]

Solved by myself.
It can be done by using jQuery .on() and 'scrollSpy:enter' used as the event of .on().
Then dont forget to unbind it, then call it again by using scrollSpy() to refresh it.

Thank you very much for this simple plugin, very helped me :D

[Mithgol]

Wait, what?

Does the scrollSpy:enter event bubble to some parent element where you can call .on()?

[farizsofyan-inmagine]

Yes, for example i have the first initialization like this:
$(document).ready(function() {
$('.MY_DIV').on('scrollSpy:enter', function() {
console.log('enter:', $(this).attr('id'));
}).on('scrollSpy:exit', function() {
console.log('exit:', $(this).attr('id'));
}).scrollSpy();
});

then i need to refresh/restart the scrollspy after the ajax load new elements, so i can just unbind it and then re-initialize the scrollspy again, like this:

$('.MY_DIV').unbind().on('scrollSpy:enter', function() {
console.log('enter:', $(this).attr('id'));
}).on('scrollSpy:exit', function() {
console.log('exit:', $(this).attr('id'));
}).scrollSpy();

Thats it. So my new element loaded from ajax will included to the scrollspy.
I think you can use this method to refresh the scrollspy :)

[Mithgol]

In your example the events are not bubbling anywhere (you listen to them in the same element where they originate).

Some $('.container').on('scrollSpy:enter', '.MY_DIV', function(){… could listen to the events (if they bubbled) in a container (i.e. in a parent element containing all class="MY_DIV" event origins).

[Mithgol]

I have found an answer to my original question. The events triggered by ScrollSpy do not bubble because currently (example) they are triggered by jQuery's .triggerHandler method, and jQuery docs say the following:

Events triggered with .triggerHandler() do not bubble up the DOM hierarchy; if they are not handled by the target element directly, they do nothing.

For me it's an issue (sometimes I am scrollspying on hundreds of elements, and having a separate event handler on each of them may slow down the browser).

I guess I'd make some pull request addressing this issue. Later.

[Mithgol]

I've just requested a pull (#10).

[mrextreme]

@farizsofyan-inmagine : I ran into a similar issue, and investigated a bit, and it seems to me that your solution is flawed. Every time you call .scrollSpy(); it will increase the size of it's internal array called "elements" - that's the variable it uses to list the HTML elements it needs to track. Even if you call it on the exact same set of HTML elements you want to spy on, it'll just keep adding them onto this array.