Bind and trigger an event in jQuery pattern

Question

Commonly I bind an event with jQuery and then call it immediately afterward, such as when I set up positioning or visibility of some elements and whatnot.

$('#myElement').on('click', function () {
    $('#myOtherElement').css('color', 'red');
}).click();

This works, but the pattern is a bit ugly, especially if my first selector finds multiple elements. Then the event is triggered multiple times, once for each element the first selector finds. I end up doing this instead:

$('.lots-of-elements').on('click', function () {
    $('#myOtherElement').css('color', 'red');
}).first().click();

Again, this works, but it's not my favorite. Is there a better pattern to use?

I know I can do something like:

function onClick() {
    $('#myOtherElement').css('color', 'red');
};

$('.lots-of-elements').on('click', onClick);
onClick();

But that's even more verbose.

Answer 1

I don't understand why you want to use a click event and then click it right away. Can't you just put the css editing in the main scope?

As to your question, you can also create a jQuery function like this:

$.fn.extend({
    clickColor: function(element, color) {
        $(this).on('click', function() {
            $(element).css('color', color);
        });
        return $(this);
    }
});

Put it in a seperate file and keep your main file clean with only:

$('#clicker').clickColor('#other', 'red').click();
$('.clicker').clickColor('.another', '#00FF00').first().click();

Have a look at the DEMO.

Ofcourse you can also put the .first() and .click() inside the function if that's what you like.

Then have a look at this DEMO 2