jQuery, getting a reference error when moving my jquery codes to external file

Question

This function works when I put it via inline html just before the end of </body>. But once I move it to js/main.js it doesn't work anymore.

Inline:

<script>
var rowNum = 0;
    function addRow(frm) {
        rowNum ++;
        var html = $('.addphone').html();
        jQuery('.phone_adds').append(html);
    }

    function removeRow(rnum) {
        jQuery('#rowNum'+rnum).remove();
    }
</script>

Versus external .js:

$(function() {

.....other functions...

    var rowNum = 0;
    function addRow(frm) {
        rowNum ++;
        var html = $('.addphone').html();
        jQuery('.phone_adds').append(html);
    }

    function removeRow(rnum) {
        jQuery('#rowNum'+rnum).remove();
    }

});

Error message: Uncaught ReferenceError: addRow is not defined

Help? What is wrong here?

@KarthikGanesan with <script src="js/main.js"></script> before the end of </body> — Sam Young
– Sam Young, Commented May 14, 2014 at 21:58

Javis Perez · Accepted Answer · 2014-05-14 21:56:52Z

2

You are enclosing your function into a wrapper:

$(function() {

    var rowNum = 0;
    function addRow(frm) {
        rowNum ++;
        var html = $('.addphone').html();
        jQuery('.phone_adds').append(html);
    }

    function removeRow(rnum) {
        jQuery('#rowNum'+rnum).remove();
    }
});

When you do that your defined functions are in fact subfunctions of the wrapper (the "$" function), so, when its called outside from this wrapper, the function doesnt exists.

The "inline" works because your function is global and visible anywhere (is not inside another function).

I would recommend removing the wrapper of the function definition and just leave the function call in the $() wrapper.

answered May 14, 2014 at 21:56

Javis Perez

4,3483 gold badges27 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jason Miller Over a year ago

The reasoning is correct; but I'd recommend removing the $(function() { (first line) and the closing }); (last line) to keep things simple.

Collectives™ on Stack Overflow

jQuery, getting a reference error when moving my jquery codes to external file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related