0

I have a file structure where index.php head includes my JS file and JQ. The content in the index file is loaded with a php include tag to load wall.php due too some dynamic.

In wall.php i have a div with the id 'wrapper', I would like to detect scroll events in that div, however it doesn't seem to trigger.

This is my JQ

$(document).on('scroll', '#wrapper', function() {
    alert('test');
});

(I have det document ready function - other JQ works)

Does somebody know why?

stmp
  • 81
  • 5

2 Answers2

0

The scroll event does not bubble and can't be delegated to the document.

Content added with PHP includes is not really dynamic in the sense that it's added after page load, so you don't need to delegate, just do

$('#wrapper').on('scroll', , function() {
    alert('test');
});
adeneo
  • 312,895
  • 29
  • 395
  • 388
0

It will not detect the scroll unless the css property overflow is set to scroll, and the div container is actually scrollable. I made a small implementation on JSFiddle.

CSS

#wrapper{
  height: 200px;
  overflow: scroll;
}

jQuery

$('#wrapper').on('scroll', function(){
   alert("Scroll Detected");
});

Only when the div becomes to small, it will then become scrollable and scroll can then be detected.

JSFiddle

PalinDrome555
  • 907
  • 6
  • 16
  • Wrapper has overflow scroll, if i set it to hidden, i can't scroll it. Wrapper is position:absolute, i don't know if that does something? – stmp Aug 02 '14 at 17:21
  • No the position should have no impact, change the keyword to click instead of scroll to see if you can detect a click event. – PalinDrome555 Aug 02 '14 at 17:36
  • I'm not. But i can using this: `$(document).on('touchend click', '#wrapper', function () { alert('test2'); });` – stmp Aug 02 '14 at 17:45
  • If you cannot detect a click event either, then your problem is one of the following 1.) Your JavaScript is getting loaded before jQuery file. 2.) Your JavaScript is being executed before the DOM is ready. – PalinDrome555 Aug 02 '14 at 17:47
  • Do you have your JS file wrapped in a document ready event? $(document).ready(function(){ $('#wrapper').on('scroll', function(){ alert("Scroll Detected"); }); }); – PalinDrome555 Aug 02 '14 at 17:50
  • I don't think that is the case. But i looked ind the code again and the file i build like this: index loads functions.js after loading JQ from Google CDN first think functions does, in the document ready function is getting the data via ajax. Therefore index's body is set like this `$('body').html(response);` – stmp Aug 02 '14 at 17:54
  • Yes, thats the first thing in the function.js other JQ is working like `$(document).on('touchstart click', '#login > .primaryButton', function () { login(); });` – stmp Aug 02 '14 at 17:57
  • Ok to detect dynamic data loaded via Ajax, you have to use $(document).on('scroll', '#wrapper', function(){ }); Is your Scroll Event being triggered before the Ajax call? Make sure any JS you write anywhere is wrapped in a DOM ready event. Are you getting any errors on your console? – PalinDrome555 Aug 02 '14 at 18:01
  • The scroll event is in an element which is loaded by the ajax so it can be trigger before. However this docent work with scroll, if I write "scroll click" click works but no scroll event. – stmp Aug 02 '14 at 18:04
  • Could you post your php files and js file to a service like Dropbox so I can have a look? – PalinDrome555 Aug 02 '14 at 18:13
  • My JQ basically look like this `$(document).ready(function() { loadLaunch(); $(document).on('scroll', '#wrapper', function(){ alert('asd'); }); if($('wrapper').length) { alert('yes'); } else { alert('no'); } });` loadLaunch() gets the content for index (including #wrapper) and i actually get "no" in response, and if i use body instead of #wrapper in the if i get a yes, so it looks like the JQ is run before the dom is ready somehow ... – stmp Aug 02 '14 at 18:19
  • $('wrapper').length should be $('#wrapper').length – PalinDrome555 Aug 02 '14 at 18:23
  • put a alert message straight after the loadLaunch() method. If you are calling an ajax request within loadLaunch(), the ajax is async and doesn't stop the rest of the code to stop executing. So before the #wrapper element gets appended to the page, you are putting a scroll event on an element that doesn't exist yet. After the wrapper gets appended in the success block, put the scroll event into another method and call that method after #wrapper has been appended. – PalinDrome555 Aug 02 '14 at 18:36
  • Okay, thanks! This works `success: function(response) { $('body').html(response); $('#wrapper').on('scroll', function() { console.log($(this).scrollTop()); }); }` Is that the best way, or do you have another suggestion? – stmp Aug 02 '14 at 18:47
  • `function loadLaunch(){ $.ajax ... onSuccess{ addEventHandlers(); } } function addEventHandlers(){ //scroll event on #wrapper $('#wrapper').on('scroll', function(){ }); //do more stuff after ajax request with content just appended }` By splitting up your code like this it makes it more loosely coupled, code is easier to find and easier to maintain. – PalinDrome555 Aug 02 '14 at 18:58