Jquery `триггер` обработка вызовов лениво

Question

У меня есть фрагмент кода, использующий JQuery, который прослушивает событие инициализации элемента DOM.

var $button = $("#myButton")

$button.on("init", function () {
	console.log("Hello")
})

$button.trigger("init")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="myButton">Hello</div>

Обратите внимание, как я сначала зарегистрировал прослушиватель событий, а затем вызвал функцию trigger.

Теперь я хочу, чтобы моя функция прослушивателя событий вызывалась независимо от того, когда вызывается триггер, то есть, если триггер вызывается до того, как я зарегистрирую прослушиватель событий, что-то вроде прослушивания потока событий.

Этот код не работает:

var $button = $("#myButton")

$button.trigger("init")

$button.on("init", function () {
	console.log("Hello")
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="myButton">Hello</div>

Есть ли JQuery конкретное решение, о котором я не знаю?

Answer 1

Хорошо, как упоминалось в комментариях, вы не можете и не должны вызывать событие перед созданием списка.

НО, вот быстрое хакерское решение, которое я собрал (потому что почему бы не ¯\ _ (ツ) _ / ¯)

Рабочий пример: https://jsfiddle.net/9mj86r5e/

Добавьте приведенный ниже код и замените $button.trigger("init") на $button._trigger("init")

/**
 * Create a callable trigger alternative
 * @param   {String}    name
 * @param   {Mixed}     ...params       Addition paramaters to send with event
 */
$.fn._trigger = function(name, ...params) {
    var $el = this;

        // Keep looping every 100ms until the event listner is found
    $el.myEventFinder = setInterval(function() {
        // Get an object of attached event listeners
        var events = $._data($el.get(0), 'events');

        // Has the event been found?
        if (events[name]) {
                // Stop the eventFinder loop
            clearInterval($el.myEventFinder);
            // Trigger event
            $el.trigger(name, ...params);
        }
    }, 100);
};

Ps, пожалуйста, не используйте этот код. То, что это выполнимо, не означает, что это должно быть сделано.