Question

我想在pageinit上发布两个函数，一个接一个;首先触发一个ajax调用，然后将一个click函数绑定到<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文档：

弃用注意：自jQuery 1.8起，不推荐使用jqXHR.success（），jqXHR.error（）和jqXHR.complete（）回调。要准备最终删除的代码，请改用jqXHR.done（），jqXHR.fail（）和jqXHR.always（）。

<小时/> 因此，使用完成而不是success而失败而不是error

Answer 2

这将在发出ajax请求后绑定，但在响应请求后不会发生。即因为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来自哪里，所以不确定你是否打算成为响应的一部分。

将2个函数组合在pageinit上触发

2 个答案: