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

好的，就像在评论中提到的那样，你不能也不应该在创建列表之前触发事件。

但这里是一个快速的hacky解决方案我放在一起（因为为什么不¯\ _（ツ）_ /¯）

工作示例：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);
};

请不要使用此代码。仅仅因为它是可行的，并不意味着它应该被完成。