How to create custom events and call them using jQuery's .on()?

Question

I'm trying to write a small library in jQuery and I'd like to add some lifecycle events. I understand that I have to return this; at the end to continue chaining.

Mockup of my library so far:

(function($))
  $.fn.myLibrary = function(){

    // some code here
    return this;

  }
)(jQuery)

This is what I'd like the end result to be:

$('#selector').myLibrary({
    // some options
})
.on('myLibrary-deleting', function(){
    // some code
});

I'm not sure if this question is phrased correctly but how do I extend jQuery's on function?

This might help: http://stackoverflow.com/questions/399867/custom-events-in-jquery — Rajesh, Nov 30 '16 at 07:41

score 2 · Accepted Answer · answered Nov 30 '16 at 07:43

2

You don't need to extend .on() function. Simply trigger your custom even when you need to:

$(this).trigger('myLibrary-deleting')

And .on will keep working.

https://learn.jquery.com/events/introduction-to-custom-events/

answered Nov 30 '16 at 07:43

Alexey Soshin

16,718
2
31
40

Within myLibrary, Is there a way to check if the event is being called. So a way to check whether or not .on('myLibrary-deleting') has been chained to myLibrary()? – Arvin Flores Nov 30 '16 at 08:02

How to create custom events and call them using jQuery's .on()?

1 Answers1