將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不知道你是否打算將其作爲響應的一部分。