Truy cập đối tượng DOM sau khi gọi AJAX?

Question

Tôi có một cuộc gọi AJAX điển hình gắn thêm một số HTML vào trang hiện tại. Tôi muốn có thể truy cập vào HTML mới được chèn vào với các bộ chọn jQuery điển hình.

Đây là những gì tôi muốn như để có thể làm ...

$.ajax({ 
    url: url, 
    success: function(data) { 
     $('body').append(data); 
    } 
}); 

$('#new_div').show(); 

#new_div sẽ có một số yếu tố HTML từ dữ liệu tôi lấy ra. Tôi không nhất thiết muốn đính kèm sự kiện vào các phần tử mới (như click), vì vậy hãy sử dụng một số thứ như .load() hoặc .on() không hoạt động ở đây (theo như tôi biết).

Tôi đã cố gắng thiết lập cuộc gọi $.ajax() thành biến: var new_div = $.ajax(...) nhưng điều đó đã không đưa tôi đến bất kỳ đâu.

Answer 1

thế nào về:

$.ajax({ 
    url: url, 
    success: function(data) { 
     $('body').append(data).find('#new_div').show(); 
    } 
}); 

Answer 2

Nếu bạn muốn tách mã của bạn từ callback:

functionWithALotOfStuffToDo = function(data){ 
    // do stuff here 
} 

$.ajax({ 
    url: url, 
    success: functionWithALotOfStuffToDo 
}); 

Answer 3

Nếu bạn muốn thao tác các nội dung mới ngay sau khi (hoặc thậm chí trước đó) chèn nó với DOM, bạn có thể đặt điều đó trong lời gọi thành công AJAX quá:

$.ajax({ 
    url: url, 
    success: function(data) { 
     $('body').append(data); 
     $('#new_div').show(); 
    } 
}); 

Mặt khác tay, nếu bạn muốn để ràng buộc xử lý nội dung đó sẽ được thêm vào các trang thông qua ajax, jQuery nào đó như thế này:

$(document).on('click', '#new_div', function(){ 
    alert("This function is bound to all #new_div's click events, even if they are added to the DOM via ajax later!") 
}); 

Answer 4

Giả sử dữ liệu được trả lại là một cái gì đó giống như <div id='new_div' /> sau đó thử một cái gì đó như

var newDiv = null; 

$.ajax({ 
    url: url, 
    success: function(data) { 
     newDiv = $(data).appendTo($('body')); 
    } 
}); 

Điều này sẽ thêm <div /> vào phần thân trang của bạn và gán phần tử jQuery cho biến số newDiv mà sau đó có thể được truy cập lại ở giai đoạn sau.

Tuy nhiên, nếu bạn truy cập newDiv trước khi success đã được trả lại, nó sẽ là null hoặc giá trị trước đó, nếu nó được gán trước đó.

Answer 5

Trên thực tế loại này của điều này có thể được giải quyết bằng cách sau: (Tôi biết nó cũng tương tự như những người khác, nhưng một chút rõ ràng hơn)

$.ajax({ 
    url: url, 
    success: function(data) { 
     $('body').append(data); 
     afterHtmlAppendCallback(); 
    } 
}); 
function afterHtmlAppendCallback() 
{ 
    $('#new_div').show(); 
} 

Answer 6

Tôi nghĩ đó là ajax async gây ra vấn đề bạn đề cập đến .

Trong API jQuery ajax funciton nói: Thực hiện yêu cầu HTTP không đồng bộ (Ajax).

Nếu bạn muốn truy cập dữ liệu từ ajax ngay sau khi yêu cầu

bạn nên đặt mã trong ajax.Chức năng thành công như:

$.ajax({ 
    url: url, 
    success: function(data) { 
     $('body').append(data); 
     $('#new_div').show(); 
    } 
}); 

Hoặc chuyển cài đặt async vào sai

$.ajax({ 
    url: url, 
    async:false, 
    success: function(data) { 
     $('body').append(data); 
    } 
}); 
$('#new_div').show(); 

rằng sẽ đảm bảo $ ('# new_div') chọn được đối tượng