如何在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，我正在寻找一种方法，在不更改JS库源代码的情况下，侦听与Ajax触发元素相关的成功Ajax响应本地事件。也就是说，我想在不更改原始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可以回答您的问题。

Btw为什么需要添加此事件/事件侦听器？如果您希望在成功的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
});