Question

我正在尝试在完成$post ajax调用后创建自定义事件listerner。这是我的代码：

$.post( url, data, function(response) {
    //Fadeout the ajax loder image
    $('#ajax-image').fadeOut();

    //Insert the Response (HTML Format) in a hidden div
    $('#scpanels').html(response).fadeIn();

    // Create an event so that other scripts can interact
    $.response.trigger('MyCustomEvent');
});

然后，在其他js文件中：

$( document ).on( 'MyCustomEvent', function() {

    //Do stuffs when that AJAX call finishes

});

这根本不起作用。对不起，我是jQuery的新手，这可能超出了我目前的能力。

由于

Answer 1

您需要做的只是在document而非response

上触发它像这样：

$.post( url, data, function(response) {
    //Fadeout the ajax loder image
    $('#ajax-image').fadeOut();

    //Insert the Response (HTML Format) in a hidden div
    $('#scpanels').html(response).fadeIn();

    // Create an event so that other scripts can interact
    $(document).trigger('MyCustomEvent'); // only change here
});

然后它应该工作

更新：没有ajax的简单示例。我只是想知道这对多个js文件是如何工作的，因为我以前从未这样做过，这是你问题的一部分。所以我刚刚创建了一个简单的例子，也许它可以帮到你。

在包含此内容的目录中创建index.html文件：

<!doctype html>
<html lang="en">
<head>
</head>
<body>
    <div class="click-me">click-me</div>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="./script-1.js"></script>
    <script src="./script-2.js"></script>
</body>
</html>

然后在同一目录中创建两个js文件。一个script-1.js

$('.click-me').on('click', function(){
    $(document).trigger('MyCustomEvent');
});

和另一个script-2.js

$( document ).on('MyCustomEvent', function() {
    alert('it works');
});

让我知道它是否适合你。

完成ajax调用后创建自定义事件

1 个答案: