Menu
I have the following fiddle. On click of button 'scroll', is it possible to call the scrollTest function inside the plugin? Right now I am calling the whole test() again and hence it is creating a new test object each time I click on scroll button.
(function ($, win, doc) {
'use strict';
$.fn.test = Plugin;
$.fn.test.Constructor = Test;
function Plugin() {
return this.each(function () {
new Test(this);
});
}
// TREE CLASS DEFINITION
// =====================
function Test(el) {
var publ = this,
priv = {};
console.log("start");
$('.test_button').click(function(){
console.log("clicked");
publ.scrollTest
})
publ.scrollTest = function () {
console.log("in scrolltest");
};
publ.bindEvents= function () {
console.log("in bind");
};
publ.fileter= function () {
console.log("in filter");
};
}
}(jQuery, this, this.document));<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h2>Hello</h2>
<button class="test_button">Click me</button>
<button class="test_button2" onclick="$('h2').test()">scroll</button>
</body>
<script>
$('h2').test();
</script>
275
Plugin initialization tasks should be performed by catching ipBeforeController event. To do this, you need to create Event class file Event. php in your plugin's root folder. Add a method named ipBeforeController() and place your plugin initialization code into it.
Answer: Use the export and import Statement Since ECMAScript 6 (or ES6) you can use the export or import statement in a JavaScript file to export or import variables, functions, classes or any other entity to/from other JS files.
You need to wrap the use of it inside a $(document).ready(); block to ensure the script has loaded before starting to use it.
If you wish to have your code only run onClick for elements with the class test_button2 you can use :
// include this only ONCE on your page.
$(document).ready(function() {
$(this).test(true); // sends the flag to initialize the click() event once
$('.test_button2').click(function(){
$(this).test(); // action on every .test_button2 click();
});
});
.. and replace ..
<button class="test_button2" onclick="$('h2').test()">scroll</button>
.. with ..
<button class="test_button2">scroll</button>
See the code below for the fix in action :
(function ($, win, doc) {
'use strict';
$.fn.test = Plugin;
var publ, priv;
function Plugin(initialize) {
if(initialize === true) {
console.log("start");
$('.test_button').click(function(){
console.log("clicked");
});
}
console.log("in scrolltest");
}
}(jQuery, this, this.document));<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h2>Hello</h2>
<button class="test_button">Click me</button>
<!-- onClick is handled by jQuery's .click() method -->
<button class="test_button2">scroll</button>
</body>
<script>
// this code should only be placed once on your page.
var $test;
$(document).ready(function() {
$test = $(this).test(true);
$('.test_button2').click(function(){
$(this).test();
});
});
</script>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
