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

從討論中，問題是當事件被觸發時，處理程序尚未添加到 dom。

因此，確保在觸發事件之前添加事件處理程序將解決問題

Answer 2

您是否嘗試過.trigger() ？ jQuery 觸發器（）

從他們的文檔中：

$( "#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);
});