Связать и вызвать событие в шаблоне jQuery

Question

Обычно я связываю событие с jQuery, а затем вызываю его сразу же после этого, например, когда я настраиваю позиционирование или видимость некоторых элементов и еще много чего.

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

Это работает, но шаблон немного уродлив, особенно если мой первый селектор находит несколько элементов. Затем событие запускается несколько раз, один раз для каждого элемента, который находит первый селектор. В итоге я делаю это вместо этого:

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

Опять же, это работает, но это не мой любимый. Есть ли лучший образец для использования?

Я знаю, что могу сделать что-то вроде:

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

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

Но это еще более многословным.

Answer 1

Я не понимаю, почему вы хотите использовать событие click, а затем щелкните его сразу. Не можете ли вы просто поместить редактирование css в основную область?

Что касается вашего вопроса, вы также можете создать функцию JQuery, как это:

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

Положите его в отдельный файл и сохранить ваш основной файл чистый только с:

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

Имеют посмотрите на DEMO.

Конечно, вы можете поместить .first() и .click() в функцию, если это то, что вам нравится.

Тогда взгляни на этом DEMO 2