How does one raise an event in a jquery plugin, and consume it on the front-end?

Question

I need to raise a couple of events with parameters within a jquery plugin, looked at similar questions, but cant seem to see what I am looking for? ANy basic examples out there?

Answer 1

You mean this?

$('#theTarget').trigger('event-name', ['hello', 'world']);

I don't think I know what "consume it on the front-end" means ...

Answer 2

I found the answer here: another stackoverlow answer

Answer 3

if i understand well you want to provide some callbacks, being able to call them as

$(this).plugin({
    onInit: function(var) { alert(var) },
    onClick: function(var) { alert(var + '!') }
});

the way i do this is by adding an option 'onInit' to the plugin and call options.onInit(var1, var2, ...) inside the plugin in the place where i want it executed

$.fn.plugin = function(options) {
    var o = $.extend({}, $.fn.plugin.defaults, options);

    return this.each(
        function() {
            o.onInit('initializing...');

            $(this).bind('click', function(e) {
                onClick('clicked');
            });
        }
    );
}

now the former code will execute alert('initializing...'); on init and alert('clicked!'); on click

i am not sure this code follows any official syntax, but it works well

if you just want to bind some custom events it is simple as described in http://api.jquery.com/bind/, just

$(this).bind('customevent', function() {
    alert('hi');
});

then use

$(this).trigger('customevent');