jQuery AJAX 使用当前页面数据提前触发

Question

我一直在阅读 jQuery 的延迟方法，并试图在 AJAX 调用上实现它们。

我正在尝试的是监听对元素 (.slideLink) 的点击，获取相应 href 值的内容，然后根据结果记录结果或记录错误。

问题是，当前页面的内容会在页面加载后立即记录下来。点击.slideLink 什么都不做。

这是我目前所拥有的：

function getDetails(val){
    return jQ.get(val);
};

// click handler
jQ('#slides').on('click', '.slideLink', function(e){
    e.preventDefault();
    var addy = jQ(this).attr("href");
    getDetails(addy);
});

jQ.when( getDetails() )
    .done(function(results) {
        console.log(results);
    })
    .fail(function() {
        console.log( 'It doesn\'t work... :(' );
    });

显然我误解了一个基本原则，但我是通过谷歌绘制空白。

Answer 1

页面加载后，您会立即触发 getDetails()。此外，每次执行 getDetails() 时都会触发一个单独的请求并返回一个新的 deferred。试试这个：

function getDetails(val){
    return jQ.get(val);
}

// click handler
jQ('#slides').on('click', '.slideLink', function(e){
    e.preventDefault();
    var addy = jQ(this).attr("href");
    getDetails(addy).done(function(results) {
        console.log(results);
    })
    .fail(function() {
        console.log( 'It doesn\'t work... :(' );
    });;
});

Answer 2

看起来(from what I read in the docs) jQ.when( getDetails() ) 将在页面加载时立即运行您的函数。

使用ajax() 而不是get() 可能会更好，这样您就可以利用done 和fail 回调属性。

function getDetails( val ) {
    $.ajax({
        type: "GET",
        url: val,
        data: (yourdata),
        success : function(){},
        error : function(){}
    })
}

此外，如果您愿意，您可以直接在.slideLink 上调用click() 方法。

jQ('.slideLink').click(function(e) {
    e.preventDefault();
    var addy = jQ(this).attr("href");
    getDetails(addy);
});