Where to put jquery files including event handlers

Question

I know it might be stupid, but as always help is appreciated:

I have pre.js file containing one event handler

$('#soon_tasks_header').click(function(){ $('#soon_tasks_content').slideToggle() ; })

it is required in application.js

     //= require pre

clicking on #soon_tasks_header doesn't toggleslide it, However, putting the code in the jQuery console in my browser works fine.

Note:

when I tested this in my pre.js file, it worked fine:

$(document).ready(function(){
alert('aaaa') })

I think I am messing something fundamental, which is importing jquery files, where and when.

score 0 · Answer 1 · answered Mar 26 '16 at 22:44

0

I put it inside

$(document).ready(function(){

$('#soon_tasks_header').click(function(){ 
    $('#soon_tasks_content').slideToggle() ;
    });
 })

and it works fine. Thanks.

answered Mar 26 '16 at 22:44

Kamal G'ool

171
2
13

score 0 · Accepted Answer · answered Mar 26 '16 at 22:45

The important thing to understand here is that event handlers on DOM elements cannot be installed until those DOM elements are present in the page. If you try to install them too early before that part of the page has been parsed by the page loader, then jQuery will just not find any matching elements in the page and no event handlers will be attached.

There are multiple ways to ensure that the code that installs the event handlers is not actually executed until the DOM elements are present in the page.

Physically place the <script> tag at the end of the <body> section. This will ensure that all DOM elements have been parsed before the script runs.
Wrap your code in $(document).ready() which will tell jQuery to wait to call your code until the page has been parsed and all DOM elements are in the page.

If you don't control the location of the <script> tags or it's complicated to get all <script> tags placed at the end of the <body> tag because of your environment, then you can just use $(document).ready() like this:

$(document).ready(function() {
    $('#soon_tasks_header').click(function(){ 
        $('#soon_tasks_content').slideToggle() ;
    })
});

And, this will work no matter where you include your script tag as long as jQuery has already been loaded first.

When rendering the content, I lose the slideToggle feature, which means the $(document).ready() is not called again, so I think I will adoubt the solution of putting — Kamal G'ool, Mar 26 '16 at 22:56
@KamalG'ool - Any time you recreate the `#soon_tasks_header` object any event handlers on the previous object will be lost. For dynamically created content, you can use delegated event handling where you attach the event handler to a static parent and that parent listens for events on it's children. The children can be dynamically created or recreated and the delegated event handlers will continue to work. See http://stackoverflow.com/questions/9814298/does-jquery-on-work-for-elements-that-are-added-after-the-event-handler-is-cre/9814409#9814409 for more explanation. — jfriend00, Mar 26 '16 at 23:27
@KamalG'ool - Did this answer your question? If so, please check the green checkmark to the left of the answer to indicate to the community that your question has now been answered and to also earn yourself some reputation points for following the proper procedure. If this did not answer your question, then please comment on what it is still missing so the answer can be edited to complete it. — jfriend00, Apr 01 '16 at 00:16

Where to put jquery files including event handlers

2 Answers2