Question

我试图在一个click事件中调用另一个元素的click事件，该事件基本上是一个window.location.href = mailto：emailaddress但问题是另一个元素有一个ajax调用而window.location.href似乎取消ajax电话。有没有一种简单的方法可以在执行window.location.href之前等待click事件中的ajax调用完成？

以下是html＆amp; amp;的示例。的javascript：

<a id="email-link" href="mailto:emailaddress@email.com">emailaddress</a>

<div class="right" id="list-items">
<ul>
    <li>Item 1</li>
    <li>Item</li>
</ul>
</div>

<script type="text/javascript">
    $('#list-items').live('click', function () {
        jQuery.ajax({
            url: "@Url.Action("Index", "Home")",
            success: function () {
                console.log('done');
            }
        });
    });

    $('#email-link').live('click', function () {
        //Let's just say it's the first item of the li
        var liItem = $('#list-items li').first();
        var thisLink = $(this);

        window.location.href = thisLink.attr("href");

        return false;
    });
</script>

Answer 1

您需要使用回调函数来判断AJAX进程何时完成。

var emailLinkOnClick = function(e) {
    var liItem = $('#list-items li').first();
    var href = $(this).attr('href');
    listItemsClick(e, function() {
        // this is executed on success of the ajax call
        // inside listItemsClick
        window.location.href = href;
    });

    e.preventDefault();
});

var listItemsClick = function(e, success) {
    $.ajax({
        //does something server side
    }).success(success);
});

$('#list-items').on('click', function(e) {
    listItemsClick(e, function(){
        // you can optionally do something on success here
    });
});

$('#email-link').on('click.redirect', emailLinkOnClick);

Answer 2

您可以外部化执行主操作的函数并传递回调函数，而不是模拟click事件：

function doStuff(obj, fn)
{
    jQuery.ajax({
        url: "@Url.Action("Index", "Home")",
        success: function () {
            console.log('done');
            fn && fn();
        }
    });
}

$('#list-items').on('click', function () {
    doStuff(this);
});

$('#email-link').on('click', function () {
    //Let's just say it's the first item of the li
    var liItem = $('#list-items li').get(0),
    url = this.href;

    doStuff(liItem, function() {
        window.location.href = url;
    });

    return false;
});

Answer 3

假设您使用的是最新版本的jQuery，$.ajax会返回一个Promise，因此您可以使用.when和.then

$('#email-link').live('click', function () {
    var self = this;   
    var liItem = $('#list-items li').first();

    $.when(liItem.click()).then(function () {
        window.location.href = $(self).attr("href");
    })
});

Fiddle

如何等待另一个元素的click事件的ajax调用完成

3 个答案: