Question

In trying to namespace my js/jquery code, I have come up against the following problem.

Basically, I used to write all my JS code in each html/php file, and I want to abstract that away to a single js file with namespaces.

So, in my html file I have:

<script type="text/javascript"> 
    $(document).ready(productActions.init());
</script>

And in my js file I have:

var productActions = {
    init: function() {

        alert('initialsed');

        $('#field_id').change(function() {
            alert('ok!');
        });     
    }

The productActions init function is definitely running, because I get the first alert (initialised). However, it seems that none of the jquery binding functions do anything at all. Stepping through the init function shows that the above change function is being registered, but actually changing the value in the field does absolutely nothing.

Am I missing something obvious here?

Answer 1

$(document).ready(productActions.init());

This code calls init() immediately and passes its return value to ready(...). (just like any other function call)

Instead, you can write

$(document).ready(productActions.init);

To pass the function itself. Howeverm this will call it with the wrong this; if you need this, write

$(document).ready(function() { productActions.init() });