0

基本的にwindow.location.href = mailto:emailaddressを実行するクリックイベント内で別の要素のクリックイベントを呼び出そうとしていますが、問題は他の要素にajax呼び出しがあり、window.location.hrefがキャンセルしているようですajax 呼び出し。このシナリオで window.location.href を実行する前に、クリック イベント内の 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

クリック イベントをシミュレートする代わりに、メイン操作を実行する関数を外部化し、コールバック関数を渡すことができます。

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 に答える
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 に答える