Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

170
Views
add event to Jquery Plugin

I have a JQuery plugin and I want to add some event to it. Any help, tips, or tutorial?

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

As I understand correctly If you have some kind of button that close the popup and you need a function that is triggered after close.

(function($) {
  $.fn.somePlugin = function(options) {
    // do some stuff with popup
    $('#closeButton').click(function(e) {
      //close popup
      if (options.onAfterClose !== undefined) {
         options.onAfterClose(e);
      }
    });
  };
})(jQuery);

it just pass the event from click event.

$('#someId').somePlugin({
    onAfterClose: function(e) {
        alert('after close');
    }
});
over 4 years ago · Santiago Trujillo Report

0

In your jquery plugin, the first thing you will have to do is trigger your custom event somewhere in your plugin code:

$("#someElement").trigger("someSpecialEvent");

You can also pass data inside of your trigger function if you want.

$("#someElement").trigger("someSpecialEvent", "this does not need to be a string");

Next, create an event handler somewhere else in your plugin code for your custom event:

$("#someElement").bind("someSpecialEvent", function(event, data) {
    //If you had passed anything in your trigger function, you can grab it using the second parameter in the callback function.
});

You can then allow a user to pass a callback function as an option like this:

$("#sampleElement").myPlugin({ 
    someEvent: function() {
        //user logic
    }
});

Finally, inside of your plugin code, you can call the user's function a few different ways. An example would be:

$.fn.samplePlugin = function(options) {
        options = $.extend({}, $.fn.samplePlugin.options, options);
        $("sampleElement").bind("specialEvent", function() {
             options.someEvent.call();
        });
 }
over 4 years ago · Santiago Trujillo Report

0

jQuery docs has everything about triggering an event

Any element that has been attached to an event using $.bind() will be notified that the event had been triggered and execute its code.

Example:

$(document).trigger('my.event');

jQuery supports 'namespaced' events, so you can name the event something like mypluginName.eventName to make sure no other plugin interferes with you events ;)

Simple and clean, although be careful, docs state that:

Although .trigger() simulates an event activation, complete with a synthesized event object, it does not perfectly replicate a naturally-occurring event.

Nice day

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!