Reputation: 14406
I'm attempting to create a plugin, but am having issues with multiple instances. I want the code to ONLY act on the instance that is being used, but currently, if I click on one, it acts on both. How do I write a plugin that only acts on the instance I am interacting with? Below is a stripped down sample of what I'm talking about.
(function( $ ) {
$.fn.cals = function(options) {
var containing_element = this;
var opts = $.extend( {}, options);
// create a container after each element
$(containing_element).after('<div class="container">Click</div>');
return this.each(function() {
$('.container').on('click', function() {
console.log('test')
})
}); // END this.each
};
})( jQuery );
The html code is:
<script>
$(document).ready(function() {
$('.test').cals();
});
</script>
<div class="test" type="text">
<div class="test" type="text">
</html>
The code inserts <div class="container>Click</div>
below both .test
divs. When I click on one, console.log('test')
spits out 2 "test". I only want the code to act on the instance I'm interacting with.
Upvotes: 0
Views: 138
Reputation: 253506
I'd suggest amending your plugin syntax to append the new element (in this case a clone of the element previously-defined) in the each()
loop:
(function ($) {
$.fn.cals = function (options) {
var containing_element = this;
var opts = $.extend({}, options);
// create containing element for calendar
var container = $('<div />', {
'class' : 'container',
'text' : 'click',
'click' : function(){
console.log('test');
}
});
return this.each(function () {
$(this).after(container.clone(true, true));
}); // END this.each
};
})(jQuery);
Incidentally, containing_element
is already a jQuery object (as is the this
within the scope of the function, albeit not within the each()
), it didn't need to be re-wrapped in jQuery, although it does no harm to do so, but it's needlessly expensive.
Upvotes: 1