Tài liệu jQuery sẵn sàng sau khi yêu cầu ajax

Question

Tôi đang gặp sự cố khi cập nhật các thành phần chưa sẵn sàng sau yêu cầu ajax.

Nếu tôi chạy myFunction() chức năng của tôi trên tải trang như vậy:

$(function() { 
myFunction(); 
} 

Tôi không có vấn đề gì cả. Nhưng nếu sau đó tôi sử dụng một cái gì đó như

$.ajax({ 
     url: this.href, 
     dataType: "script", 
     complete: function(xhr, status) { 
     myFunction(); 
     } 
    }); 

trả về $(".myElement").replaceWith("htmlHere"). Các yếu tố chỉ đơn giản là không sẵn sàng khi sự kiện hoàn thành cháy. Nếu tôi thiết lập một sự chậm trễ trong đó nó hoạt động tốt trở lại.

Có sự kiện nào khác bị sa thải ngoài 'hoàn thành' khi DOM đã sẵn sàng không?

Cập nhật:

Dưới đây là đoạn code thực tế:

$(function() { 
    $("a.remote").live("click", function(e) {  
    $.ajax({ 
     url: this.href, 
     dataType: "script", 
     success: function(xhr, status) { 
       myFunction(); 
      } 
    }); 

    e.preventDefault(); 
    return false; 
    }); 

    myFunction(); 
}); 

function myFunction() { 
    // Modify the dom in here 
} 

Các thiếu); chỉ là một lỗi đánh máy.

Tôi đã thử sử dụng thành công ngay bây giờ thay vì hoàn thành và dường như không có bất kỳ sự khác biệt nào.

Answer 1

$(function() { 
myFunction(); 
} 

nên

$(document).ready(function() { 
myFunction(); 
}); 

Hoặc trong trường hợp bạn muốn ajax để chạy trên tải. Do

$(document).ready(function() { 
$.ajax(); 
}); 

Answer 2

Bạn có thể sử dụng $(document).ready(function() { ... }); để kết thúc mọi thứ bạn muốn kích hoạt khi DOM tải. Yêu cầu ajax của bạn có thể được đặt bên trong các document.ready nếu bạn muốn điều này để chờ đợi cho đến khi dom đã được tải.

Nếu bạn muốn đợi cho đến khi ajax nạp tài nguyên của nó thì bạn nên sử dụng ajax.success thay vì complete.

Answer 3

Bạn đang thiếu dấu ngoặc đơn đóng của hàm bao bọc tài liệu sẵn sàng.

$(function() { 
myFunction(); 
}); 

Lưu ý }); ở cuối.

Answer 4

Chỉ cần thay đổi complete:-success: trong $.ajax() cuộc gọi của bạn:

$.ajax({ 
     url: this.href, 
     dataType: "script", 
     success: function(xhr, status) { 
     //make your DOM changes here 
     myFunction(); 
     } 
}); 

Chức năng success sẽ chạy một lần theo yêu cầu AJAX nhận được một phản ứng thành công. Vì vậy, hãy thay đổi DOM của bạn trong hàm đó, sau đó chạy myFunction().

Sửa
Bạn dường như đang cố gắng để làm cho những thay đổi DOM sử dụng myFunction() của bạn. Nhưng nếu trước tiên bạn không chèn HTML nhận được trong phản hồi AJAX vào DOM, thì sẽ không có gì cho myFunction() để sửa đổi.Nếu đây thực sự là những gì đang xảy ra, sau đó bạn có hai lựa chọn:

1. Chèn HTML phản ứng vào DOM, sau đó gọi myFunction() (và tất cả điều này nên xảy ra trong phạm vi chức năng success gọi lại).
2. Chuyển phản hồi AJAX đến myFunction() làm đối số, để myFunction() có thể xử lý chèn DOM và sau đó thực hiện sửa đổi cần thiết.

Answer 5

Tôi đã thiết lập một số jsfiddle dựa trên mã của bạn và có vẻ như nó đang hoạt động.

Đây là mã hiện tại:

$(function() { 
    $("a.remote").live("click", function(e) {  
    $.ajax({ 
     url: this.href, 
     dataType: "script", 
     success: function(xhr, status) { 
       myFunction(); 
      } 
    }); 

    e.preventDefault(); 
    return false; 
    }); 

}); 

function myFunction() { 
    $("span").replaceWith("<p>test</p>"); 
} 

Và nó sẽ thay thế thẻ div với một đoạn. Vui lòng kiểm tra và so sánh với mã của bạn. Nếu nó giống nhau, thì vấn đề của bạn ở đâu đó ngoài chức năng này (có thể trong myFunction?).

Answer 6

Có sự kiện kích hoạt sau mỗi cuộc gọi ajax. Nó được gọi là ajaxComplete.

$(document).ajaxComplete(function() { 
    $(".log").text("Triggered ajaxComplete handler."); 
}); 

Vì vậy, bạn có thể

function Init(){ 
    // stuff here 
} 

$(document).ready(function() 
    Init(); 
}); 
$(document).ajaxComplete(function() 
    Init(); 
});