title: jQuery Plugin, invoke the function on the triggered event
body: <p>I have created a very simple Jquery plugin.</p>
  <pre><code>(function ($) {
      $.fn.l4pTabs = function () {
  
          var container = $(this);
  
          var chls = Array();
          var icos = Array();
  
          container.children('div').each(function () {
              chls.push($(this));
          });
  
          container.children('svg').each(function () {
              icos.push($(this));
          });
  
          var tabIcons = $('&lt;div/&gt;', { class: &quot;l4pTabs-tab-icons&quot;, appendTo: container });
          var slider = $('&lt;div/&gt;', {
              class: &quot;l4pTabs-slider&quot;,
              appendTo: container
          });
  
          for (let i = 0; i &lt; chls.length; i++) {
              $(&quot;&lt;div/&gt;&quot;, {
                  class: &quot;l4pTabs-ico&quot;,
                  on: {
                      click: function () {
                          l4pTabClick(i);
                      }
                  },
                  append: icos[i],
                  appendTo: tabIcons
              });
  
              $('&lt;div/&gt;', {
                  class: &quot;l4pTabs-panel&quot;,
                  append: chls[i],
                  appendTo: slider
              });
          };
  
          slider.css('width', chls.length + '00%');
  
          var prevN = 0;
  
          var inN = container.data('val');
          if (!inN) inN = 1;
          l4pTabClick(inN - 1);
  
          function l4pTabClick(n) {
              $(tabIcons).children().eq(prevN).removeClass('l4pTabs-ico-active');
              $(tabIcons).children().eq(n).addClass('l4pTabs-ico-active');
              slider.css('margin-left', '-' + n * 100 + '%');
              prevN = n;
              container.trigger('change');
          };
  
          this.value = function () {
              return prevN;
          };
  
          return this;
      };
  })(jQuery);  
  </code></pre>
  <p>The plugin works fine.</p>
  <pre><code>var myPg = $('#myDiv').l4pTabs();
  
  myPg.on('change', function () {
      alert(myPg.value());
  });  
  </code></pre>
  <p>But I would like to use it like this:</p>
  <pre><code>    $('#myDiv').l4pTabs().on('change', function () {
          alert($(this).value());// &lt;--- Uncaught TypeError: $(...).value is not a function
      });  
  </code></pre>
  <p>In this case the 'change' event is raised correctly, but $(this) does not expose the 'value' function.
  I checked and $(this) matches my div '#myDiv'.</p>
  <p>Why does it tell me that 'value' is not a function?<br />
  How is it to be done?<br />
  Thank you</p>