My question deals with the inheritance of this and how to potentially prevent the events this from overriding my functions this. So below is some sudo-code to help me explain. Basically I have events that are going to have to call other functions from my function, but the this keyword is overwritten by the event.
;(function($, window, document, undefined) {
// default values for plugin
var multiText = "multiText", defaults = {};
function multiTextPlugin(element, options) {
this.element = element;
defaults['element'] = element;
this.settings = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = multiText;
this.init();
}
$.extend(multiTextPlugin.prototype, {
// initialization plugin
init: function() {
// Build Iniital HTML
this.buildSVG();
$(defaults.element).append(this.multiTextHTML('initial'));
// store HTML for events
defaults['html'] = this.multiTextHTML('');
// addEvents
this.addEvents();
},
buildSVG: function(){
// create svg
var svg = '<svg class="defs-only" xmlns="http://www.w3.org/2000/svg" width="0" height="0"><defs>';
// define plus sign path
svg += '<g id="plus"> <path class="plus" d="M11 5.75v1.5q0 .312-.22.53t-.53.22H7v3.25q0 .312-.22.53t-.53.22h-1.5q-.312 0-.53-.22T4 11.25V8H.75q-.312 0-.53-.22T0 7.25v-1.5q0-.312.22-.53T.75 5H4V1.75q0-.312.22-.53T4.75 1h1.5q.312 0 .53.22t.22.53V5h3.25q.312 0 .53.22t.22.53z" /> </g>';
// define check path
svg += '<g id="check"><path class="check" d="M13.055 4.422q0 .312-.22.53l-6.718 6.72q-.22.22-.53.22t-.532-.22l-3.89-3.89q-.22-.22-.22-.532t.22-.53l1.06-1.063q.22-.22.532-.22t.53.22l2.298 2.305L10.71 2.83q.22-.22.53-.22t.532.22l1.062 1.06q.22.22.22.532z" /></g>';
// define close sign path
svg += '<g id="close"><path class="close" d="M10.14 10.328q0 .312-.218.53L8.86 11.922q-.22.22-.53.22t-.532-.22L5.5 9.625 3.205 11.92q-.22.22-.53.22t-.532-.22L1.08 10.86q-.22-.22-.22-.532t.22-.53L3.377 7.5 1.08 5.203q-.22-.22-.22-.53t.22-.532l1.062-1.06q.22-.22.53-.22t.532.22L5.5 5.375 7.8 3.08q.22-.22.53-.22t.532.22l1.062 1.06q.22.22.22.532t-.22.53L7.625 7.5l2.297 2.297q.22.22.22.53z" /></g>';
// close svg definitions
svg += '</defs></svg>';
$('body').append(svg);
},
multiTextHTML: function(objClass){
var html = '<div class="multi-text-container '+objClass+'">';
// build default button / checkbox
html += '<label><input type="checkbox" class="default-choice-checkbox" value="first_checkbox">';
html += '<span class="default-choice">';
html += '<svg class="icon"><use xlink:href="#check"/></svg>';
html += '</span></label>'
// input text box
html += '<input name="fieldSettings_choices_text" class="input-element" type="text" data-default="false">';
// add button
html += '<button name="add" class="add-choice" type="button" title="Add a choice."><svg class="icon"><use xlink:href="#plus"/></svg></button>';
// remove button
html += '<button name="remove" class="remove-choice" type="button" title="Remove this choice."><svg class="icon" viewBox="0 0 20 20"><use xlink:href="#close"/></svg></button>';
html += '</div>';
return html;
},
addEvents:function(){
$('.default-choice-checkbox').click(this.defaultChoice);
$('.add-choice').click(this.addNewMultiText);
$('.remove-choice').click(this.removeThisMultiText);
},
removeEventListeners:function(){
$('.default-choice-checkbox, .add-choice, .remove-choice').unbind('click');
},
defaultChoice: function(){
if(this.checked){
$('.default-choice').addClass('active');
} else {
$('.default-choice').removeClass('active');
}
},
addNewMultiText: function(event){
var html = defaults.html;
$(html).appendTo($(defaults.element));
console.log(this);
// How do I call the removeEventListeners function above Normally it would this.removeEventListeners
// here this is replaced by the event
},
removeThisMultiText: function(event){
$(this).parent().remove();
},
});
// prevent multiple instantiations
$.fn[multiText] = function(options) {
return this.each(function() {
if (!$.data(this, "plugin_" + multiText)) {
$.data(this, "plugin_" +
multiText, new multiTextPlugin(this, options));
}
});
};
})(jQuery, window, document);
$(function(){
$('.multi-text-outerContainer').multiText({});
});html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}.defs-only{display:none}.multi-text-container{width:100%;float:left;margin-bottom:20px}.multi-text-container button,.multi-text-container input[type=checkbox]{border:1px solid #ccc;background:#eee;color:#333;padding:10px;float:left}.multi-text-container input[type="checkbox"]{display:none}.multi-text-container .default-choice{display:block;float:left;height:44px;padding:10px;border:1px solid #ccc;border-radius:5px 0 0 5px;margin:0;background:#eee;color:#6f6f6f}.multi-text-container .default-choice.active{background:#5cb85c;border:1px solid #357935;color:#163216}.multi-text-container input[type="text"]{float:left;padding:10px;height:44px;font-size:14px;width:200px}.multi-text-container .remove-choice{border-radius:0 5px 5px 0;margin:0;color:#fff;background:#d9534f;border:1px solid #a02622;color:#4c1210}.multi-text-container .add-choice{background:#5bc0de;border:1px solid #2390b0;color:#124a5b}.icon{display:inline-block;width:20px;height:20px;background-color:transparent;background-repeat:no-repeat;background-position:center;border:0;fill:currentColor}.check,.plus,.close{fill:currentColor;transform:scale(1.5)}.plus,.close{transform:translate(2px, 1.5px) scale(1.5)}
/*# sourceMappingURL=multiText.css.map */<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multi-text-outerContainer">
</div>
