如何在 Ajax 觸發元素上監聽 Ajax 事件？

Question

在我的 HTML 文檔中，我有以下代碼：

<a id='ajax-trigger' href='...', data-one='...'>
  Trigger AJAX!
</a>

在外部的，不是我自己的和不可編輯的 JS 庫中，我有這樣的東西：

$('#ajax-trigger').on('click', function() {
  $.ajax({
    type: "POST",
    url: a.attr('href'),
    data: postData,
    dataType: 'json',
    success: function(data) {
      // handle Ajax success...
    },
    error: function(jqXHR, textStatus, errorThrown) {
      // handle Ajax error...
    }
  });
});

有了上面的代碼，當點擊<a>鏈接時，就會觸發 Ajax 請求。

現在，為了在 Ajax 響應成功后進一步操作 DOM，我正在尋找一種方法來監聽與 Ajax 觸發元素相關的成功 Ajax 響應本地事件，而無需更改 JS 庫源代碼。 也就是說，我想在不改變原始JS庫的情況下，為HTML文檔中的<a>元素添加一個Ajax成功事件監聽器。 也許，像這樣（注意： ajaxSuccess只是一個例子）：

<a id='ajax-trigger' href='...', data-one='...'>
  Trigger AJAX!
</a>

<script type="text/javascript">
  $(document).ready(function() {
    $('#ajax-trigger').on('ajaxSuccess', function() {
      // handle Ajax success in addition to the 
      // Ajax success handler in the JS library...
    });
  });
</script>

使用 jQuery/JS 可以嗎？

Answer 1

僅使用您的代碼並添加純 JS - 解決方案 2 回答您的問題。

順便說一句：你為​​什么需要添加這個事件/事件監聽器？ 如果您希望在成功調用 ajax 后執行一個函數，您需要做的就是調用該函數作為 $.ajax 成功的一部分

解決方案1：

$('#ajax-trigger').on('click', function() {
  $.ajax({
    type: "POST",
    url: a.attr('href'),
    data: postData,
    dataType: 'json',
    success: function(data) {
      // handle Ajax success...
      myAjaxSuccessFunction();
    },
    error: function(jqXHR, textStatus, errorThrown) {
      // handle Ajax error...
    }
  });
});

function myAjaxSuccessFunction() {
    //do some stuff
}

解決方案 2：在元素上觸發一個實際事件，並在該元素上為這種事件設置一個偵聽器。

//create the event
var myAjaxSuccessEvent = new Event('AjaxSuccessEvent');

//attach the event to the HTML element
var myHTMLelement = document.getElementById('my-element');
myHTMLelement.addEventListener('AjaxSuccessEvent', function() {
    //do something
    alert("Event fired");
});

//or attach the listener like this, in your case
$('#ajax-trigger').on('AjaxSuccessEvent', function() {
  // handle Ajax success in addition to the 
  // Ajax success handler in the JS library...
});

//fire the event after successful AJAX call
$('#ajax-trigger').on('click', function() {
  $.ajax({
    type: "POST",
    url: a.attr('href'),
    data: postData,
    dataType: 'json',
    success: function(data) {
      // handle Ajax success...
      myHTMLelement.dispatchEvent(myAjaxSuccessEvent);
      var myElement = document.getElementById('ajax-trigger');
      myElement.dispatchEvent(myAjaxSuccessEvent);
    },
    error: function(jqXHR, textStatus, errorThrown) {
      // handle Ajax error...
    }
  });
});

解決方案 3：沒有自定義事件除非有您訂閱的實際事件，否則您無法添加事件偵聽器。 如果您不想添加自定義事件，則必須觸發現有事件之一。

//fire the event after successful AJAX call
$('#ajax-trigger').on('click', function() {
  $.ajax({
    type: "POST",
    url: a.attr('href'),
    data: postData,
    dataType: 'json',
    success: function(data) {
      // handle Ajax success...
      // use an existing event
      var getMyElement = document.getElementById('ajax-trigger');
      getMyElement.onchange();
    },
    error: function(jqXHR, textStatus, errorThrown) {
      // handle Ajax error...
    }
  });
});

$('#ajax-trigger').on('onchange', function() {
    //do something
});