如何从 jquery 插件元素上的单击事件获取返回值？

Question

I am creating a plugin which will be attached to a div and show up with few buttons. Now when these buttons are clicked, it will perform some calculation and return a value which will be stored in variable. Below is the probable scenario.

  $(document).ready(function()
  {
     /*---- Custom plugin is initialized ---------*/ 
     $('.mydiv').myPlugin();

      /*----- Click event on the buttons created by the plugin and attached to the div -----*/
      $('body').on('clicked','.myPluginButton',function()
      {
        var returnedValue = /* Here plugin calculated some data and returns a value which will be stored in this returnedValue variable for later use */
      });
   });

Please suggest the way forward for this problem. Thanks in advance.

Answer 1

In short, you'll need something like this:

$('.mydiv').myPlugin({ // Pass options Object to plugin
  clicked: function(ev, data) {
    console.log(data); // Example accessing data Object
  }
});

Since you say your buttons are created by your plugin, let it be so!
Instead of creating listeners to 'body' :

• Create a plugin options Method (callback) called clicked
• Use .call() to pass this , ...arguments , and a data Object
• Use your plugin methods when instantiating your plugin

 $.fn.myPlugin = function(opt) { const settings = $.extend({ namespace: 'myPlugin', clicked: function() {}, }, opt); this.each(function(index, el) { const $el = $(el); // Your target element const data = { // Some data you want to pass on click index: index, el: el, $el: $el, test: `This is ${settings.namespace} ${index}` }; // The button created by the plugin and attached to the Element $('<button/>', { appendTo: $el, class: settings.namespace+'-button', text: 'CLICK ME', }).on(`click.${settings.namespace}`, function() { if (settings.clicked && typeof settings.clicked === 'function') { return settings.clicked.call(this, ...arguments, data); } }); }); return this; }; jQuery(function($) { // DOM ready and $ alias in scope // Custom plugin is initialized $('.mydiv').myPlugin({ // Click event on the buttons created by the plugin and attached to the div clicked: function(ev, data) { console.log(ev.type); // Example accessing $Event Object console.log(this.textContent); // Accessible this reference to Button console.log(ev.target.tagName); // Example accessing target Element (Button) console.log(data.test); // Example accessing data console.log(`Parent ID is: ${data.el.id}`); // Example accessing parent ID from data } }); });

 <div class="mydiv" id="mydiv_1">THIS IS MYDIV_1</div> <div class="mydiv" id="mydiv_2">THIS IS MYDIV_2</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Or with less code for sake of readability, and by using the jQuery.Event.data Object:

 $.fn.myPlugin = function(opt) { const settings = $.extend({ clicked: function() {}, }, opt); return this.each(function(index, el) { const data = { index: index, text: `Clicked ${index}` }; $('<button/>', { appendTo: el, class: 'myPlugin-button', text: 'CLICK', }).on('click', data, settings.clicked); }); }; $('.mydiv').myPlugin({ clicked: function(ev) { console.log(ev.data.index); console.log(ev.data.text); } });

 <div class="mydiv" id="mydiv_1">THIS IS MYDIV_1</div> <div class="mydiv" id="mydiv_2">THIS IS MYDIV_2</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>