Closed
Description
On this page - http://learn.jquery.com/code-organization/concepts/ - aka https://github.com/jquery/learn.jquery.com/blob/master/page/code-organization/concepts.md, at the bottom there is an example that yields an error in the console, specifically:
Uncaught TypeError: Cannot read property 'clone' of undefined
I put the code into a test.js that a quicktest.html file loads, and then started a server via python -m SimpleHTTPServer.
My code is a copy-paste, as follows:
test.js: contains a copy-paste of the existing code in concepts.md, i.e.,:
// Using the module pattern for a jQuery feature
$( document ).ready(function() {
var feature = (function() {
var items = $( "#myFeature li" );
var container = $( "<div class='container'></div>" );
var currentItem = null;
var urlBase = "/foo.php?item=";
var createContainer = function() {
var item = $( this );
var container = container.clone().appendTo( item ); // ERROR here - container undefined.
item.data( "container", container );
};
var buildUrl = function() {
return urlBase + currentItem.attr( "id" );
};
var showItem = function() {
currentItem = $( this );
getContent( showContent );
};
var showItemByIndex = function( idx ) {
$.proxy( showItem, items.get( idx ) );
};
var getContent = function( callback ) {
currentItem.data( "container" ).load( buildUrl(), callback );
};
var showContent = function() {
currentItem.data( "container" ).show();
hideContent();
};
var hideContent = function() {
currentItem.siblings().each(function() {
$( this ).data( "container" ).hide();
});
};
items.each( createContainer ).click( showItem );
return {
showItemByIndex: showItemByIndex
};
})();
feature.showItemByIndex( 0 );
});
html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.proxy demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<p><button id="test">Test</button></p>
<p id="log"></p>
<!--some random stuff-->
<script>
var obj = {
name: "John",
test: function() {
$( "#log" ).append( this.name );
$( "#test" ).off( "click", obj.test );
}
};
$( "#test" ).on( "click", obj.test );
</script>
<!--some random stuff-->
<div class='container'></div>
<div id="myFeature">
<li>hey</li>
</div>
</body>
</html>
I feel like the variable should be accessible. Apologies if I'm missing something obvious.
Metadata
Metadata
Assignees
Labels
No labels