http://codepen.io/anon/pen/GIaor
At the bottom of the Javascript I have 3 example lines.
Could someone explain to me why B fails and why C works?
Code: Select all
<html>
<head>
...jquery...etc...
</head>
<body>
<p class="delete-button"> [x] Delete Something</p>
</body>
</html>
Code: Select all
var MyThing = {
settings: {
x_buttons: null
},
init: function() {
this.settings.x_buttons = $('.delete-button');
this.bindUIActions();
},
bindUIActions: function() {
this.settings.x_buttons.click( this.confirmDeletion );
},
confirmDeletion: function(event)
{
var ask = confirm('Are you sure you want to delete this entry?');
if( false === ask){ event.preventDefault(); }
}
};
// A: works
// MyThing.init();
// B: fails
// Cannot set property 'x_buttons' of undefined
// this.settings is undefined
// $(document).ready( MyThing.init );
// C: works
$(document).ready( function(){ MyThing.init() } );