admin管理员组

文章数量:1410737

I am bining plugin files to reduce the number of HTTP requests. Removed minimization for debugging.

The bined script file is:

test.js:

(function($){
    $.fn.extend({
    GetNewDiv: function(){
        return $('<div>Testing new div</div');
    }
    });
})(jQuery)

// ;jQuery.noConflict(); 
(function($){
    $.fn.extend({
    GetNewSpan: function(){
        return $('<span class="test">Testing new div</span>');
    }
    });
})(jQuery)

HTML that uses this file

<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script src="test.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){
    alert('document ready');
});
</script>
</head>
<body>
test message
</body>

Opening the file in Firefox displays this error in Firebug

function ($) {$.fn.extend({GetNewDiv: function () {return $("<div>Testing new div</div");}});}(jQuery) is not a function
file:///C://js/test.js
Line 10

Adding "jQuery.noConflict(); " between the 2 plugin helps, but then the error changes to $ is not a function

Any ideas what is wrong? What is the correct way to bine multiple .js files into one file?

Thanks Abhi

I am bining plugin files to reduce the number of HTTP requests. Removed minimization for debugging.

The bined script file is:

test.js:

(function($){
    $.fn.extend({
    GetNewDiv: function(){
        return $('<div>Testing new div</div');
    }
    });
})(jQuery)

// ;jQuery.noConflict(); 
(function($){
    $.fn.extend({
    GetNewSpan: function(){
        return $('<span class="test">Testing new div</span>');
    }
    });
})(jQuery)

HTML that uses this file

<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script src="test.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){
    alert('document ready');
});
</script>
</head>
<body>
test message
</body>

Opening the file in Firefox displays this error in Firebug

function ($) {$.fn.extend({GetNewDiv: function () {return $("<div>Testing new div</div");}});}(jQuery) is not a function
file:///C://js/test.js
Line 10

Adding "jQuery.noConflict(); " between the 2 plugin helps, but then the error changes to $ is not a function

Any ideas what is wrong? What is the correct way to bine multiple .js files into one file?

Thanks Abhi

Share Improve this question edited Jan 31, 2011 at 13:58 Pointy 414k62 gold badges595 silver badges629 bronze badges asked Jan 31, 2011 at 13:56 AbhiAbhi 1071 gold badge3 silver badges13 bronze badges 2
  • 2 when you paste code into questions on Stackoverflow, just paste the code, select it, and then click the "{}" at the top of the edit box. – Pointy Commented Jan 31, 2011 at 13:59
  • ah! I was trying to figure that one out. Thanks for the tip. – Abhi Commented Jan 31, 2011 at 15:02
Add a ment  | 

1 Answer 1

Reset to default 11

You just need a semicolon between the files. Each of those ... things is a JavaScript expression fragment. Without a semicolon, the parser thinks the expression continues.

Semicolons are sometimes optional in JavaScript, but when they're not, they're not.

本文标签: javascriptCombining jQuery plugin files generates errorsStack Overflow