将2个函数组合起来在pageinit中触发

Question

我有两个函数我想在pageinit中一个接一个地触发;首先触发ajax调用，然后将点击函数绑定到<a>元素，但是我的尝试失败了。

两个功能如下：

$(document).on("pageinit", "#featuredtracks", function(e) { 
var surl = "http://localhost/musicapp/includes/alltracks.php"; 
var id = 1; 
    $.ajax({ 
    type: "GET", 
    url: surl, 
    dataType: "jsonp", 
    cache : false, 
    jsonp : "onJSONPLoad", 
    jsonpCallback: "featuredtrackscallback", 
    crossDomain: "true", 
    success: function(response) { 
    } 
    }, 
    error: function (xhr, status) {   
     alert('Unknown error ' + status); 
    }  
});   
}); 

和

$(document).on("pageinit", "#featuredtracks", function(e) { 
    $(this).find('a').unbind('click').click(function() { 
     passDataObject.selectedHref = this.href; 
    }); 
}); 

如果我能得到正确的方式把它们结合在一起我会很感激。最后，如果我能得到一个教程来将这个Ajax请求转换为jQuery Ajax请求将会很好。

Answer 1

尝试这种解决方案：

$(document).on("pageinit", "#featuredtracks", function(e) { 
    var surl = "http://localhost/musicapp/includes/alltracks.php"; 
    var id = 1; 
     $.ajax({ 
     //rest of code 
     }).done(function(data){ 
      $(this).find('a').unbind('click').click(function() { 
       passDataObject.selectedHref = this.href; 
      }); 
     }).fail(function(){ 
      //when something fail 
     }) 
    }); 

另外，从jQuery文档：

弃用注意：该jqXHR.success（），jqXHR.error（），和jqXHR.complete（）回调是自jQuery 1.8弃用。要准备代码以便最终删除它们，请改用jqXHR.done（），jqXHR.fail（）和jqXHR.always（）。

---

所以使用 做，而不是 success和 失败代替 error

Answer 2

Ajax请求作出后这将绑定，但响应的请求后不neccesarily。即因为ajax请求是异步的。

$(document).on("pageinit", "#featuredtracks", function(e) { 
var surl = "http://localhost/musicapp/includes/alltracks.php"; 
var id = 1; 
    $.ajax({ 
    type: "GET", 
    url: surl, 
    dataType: "jsonp", 
    cache : false, 
    jsonp : "onJSONPLoad", 
    jsonpCallback: "featuredtrackscallback", 
    crossDomain: "true", 
    success: function(response) { 
    } 
    }, 
    error: function (xhr, status) {   
     alert('Unknown error ' + status); 
    }  
});//end ,ajax 

$(this).find('a').unbind('click').click(function() { 
     passDataObject.selectedHref = this.href; 
    }); 

});//end pageinit 

这将绑定到锚请求成功后，所以如果你想等到服务器响应您的Ajax请求做到这一点：

$(document).on("pageinit", "#featuredtracks", function(e) { 
var surl = "http://localhost/musicapp/includes/alltracks.php"; 
var id = 1; 
    $.ajax({ 
    type: "GET", 
    url: surl, 
    dataType: "jsonp", 
    cache : false, 
    jsonp : "onJSONPLoad", 
    jsonpCallback: "featuredtrackscallback", 
    crossDomain: "true", 
    success: function(response) { 
     alert('test fire when ajax response succeeds'); 
     //put a break point here with your browser, then run $(this).find('a') in console to see if it finds the element 
     $(this).find('a').unbind('click'); 
     $(this).find('a').click(function() { 
      alert('test fire when clicked'); 
      passDataObject.selectedHref = this.href;    
     }); 
    } 
    }, 
    error: function (xhr, status) {   
     alert('Unknown error ' + status); 
    }  
});//end ,ajax 
});//end pageinit 

不过，我不知道从哪里变passDataObject不知道你是否打算将其作为响应的一部分。