Where to put jquery files including event handlers

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.