javascript - jQuery，将我的 jquery 代码移动到外部文件时出现引用错误

Question

当我通过内联 html 将其放在 </body> 末尾之前时，此函数起作用。 。但是一旦我将它移动到 js/main.js 它就不再工作了。

内联:

<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>

与外部 .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();
    }

});

错误消息:Uncaught ReferenceError: addRow is not defined

帮忙？这里出了什么问题？

Answer 1

您将函数封装到包装器中:

$(function() {

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

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

当您这样做时，您定义的函数实际上是包装器的子函数(“$”函数)，因此，当从该包装器外部调用它时，该函数不存在。

“内联”之所以有效，是因为您的函数是全局的并且在任何地方都可见(不在另一个函数内部)。

我建议删除函数定义的包装器，并将函数调用保留在 $() 包装器中。