jQuery 自定义事件未在 AJAX 成功回调中触发

Question

我正在我的应用程序中试验 jQuery custom Events。

在下面的 jQuery AJAX 请求代码中，在 success 回调中我正在尝试 trigger() 我的自定义 Event

虽然它似乎没有触发它。这是否根本无法在成功回调中完成，需要在其他地方调用？

jQuery AJAX 请求代码

// Request Task Record using AJAX Request to Server
var jqXHR = $.ajax({
    type: 'POST',
    async: false,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    url: projectTaskModal.cache.getTaskRecordUrlEndpoint,
    data: {
        action: 'load-task-record',
        task_id: taskId
    },
    success: function(data) {

        // NON RELEVANT CODE REMOVED FOR DEMO

        // Event that is not being triggered....
        // Publish 'task-modal-data-loaded' Event to Subscribers
        $.event.trigger({
            type: 'task-modal-data-loaded',
            source: 'ajax',
            message: 'Task Modal Object Loaded from AJAX Request',
            time: new Date()
        });

    }
}); // end AJAX request

自定义事件订阅者

$(document).on('task-modal-data-loaded', function(event) {
    //alert('Task Modal Object Loaded');
    console.log('CUSTOM APP EVENTS: Event: task-modal-data-loaded Source: '+event.source+' Message: '+event.message+' Time: '+event.time);
});

Answer 1

你试过 .trigger() 了吗？ jQuery trigger()

来自他们的文档：

$( "#foo" ).on( "custom", function( event, param1, param2 ) {
  alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );

因此对于您的实施：

$(document).trigger('task-modal-data-loaded',[{
        source: 'ajax',
        message: 'Task Modal Object Loaded from AJAX Request',
        time: new Date()
    }]);

听众：

$(document).on('task-modal-data-loaded', function(event,data) {
//alert('Task Modal Object Loaded');
    console.log('CUSTOM APP EVENTS: Event: task-modal-data-loaded Source:    '+
      data.source + ' Message: ' + data.message + ' Time: ' + data.time);
});

Answer 2

根据讨论，问题是当事件被触发时，处理程序尚未添加到 dom。

因此确保在触发事件之前添加事件处理程序将解决问题

jQuery 自定义事件未在 AJAX 成功回调中触发

jQuery Custom Event not triggering in AJAX Success Callback

javascript

ajax

jquery

jquery-events