0

我试图在一个基本上执行 window.location.href = mailto:emailaddress 的点击事件中调用另一个元素的点击事件，但问题是另一个元素有一个 ajax 调用，并且 window.location.href 似乎正在取消阿贾克斯调用。在这种情况下执行 window.location.href 之前，是否有一种简单的方法可以等待 click 事件中的 ajax 调用完成？

以下是 html 和 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>
4

3 回答 3

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);
于 2013-04-08T23:53:23.923 回答
1

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

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;
});
于 2013-04-09T04:33:31.620 回答
0

假设你使用的是最新版本的 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");
    })
});

小提琴

于 2013-04-09T00:06:12.267 回答