Chạy một hàm sau khi tải hộp thoại jQuery

Question

Đây có thể là một câu hỏi đơn giản, nhưng tôi không thể làm cho nó hoạt động được. Tôi đang sử dụng hộp thoại jQuery để hiển thị biểu mẫu được tải từ một trang khác trên trang web của tôi. Người dùng nhấp vào liên kết để kích hoạt hộp thoại. Những gì tôi đang cố gắng làm là chạy một hàm sau khi tải HTML vào hộp thoại. Đây là mã của tôi để tải hộp thoại:

$(document).ready(function() { 
    $(".openDialog").live("click", function (e) { 
     e.preventDefault(); 

     $("#dialogBox").dialog({ 
      title: $(this).attr("data-dialog-title"), 
      close: function() { $(this).remove() }, 
      modal: true 
     }) 
     .load(this.href); 
    }); 

    $(".close").live("click", function (e) { 
     e.preventDefault(); 
     $(this).closest(".dialog").dialog("close"); 
    }); 
}); 

Tôi có hàm myFunction() mà tôi muốn gọi khi HTML được tải vào hộp thoại. Sau khi nhìn xung quanh cho khá một chút, tôi đã cố gắng xác định các chức năng trong .load, như thế này:

.load(this.href, myFunction()); 

Tôi cũng đã cố gắng sử dụng các sự kiện mở, như thế này:

open: myFunction(), 

Tôi đang làm gì sai ?

Answer 1

Giải pháp # 1:

.load(this.href, myFunction); 

Giải pháp # 2:

.load(this.href, function(){ 
    myFunction(); 
}); 

Giải pháp # 3 (nghỉ):

open: myFunction, 

Giải pháp # 4:

open: function(){ 
    myFunction(); 
} 

---

Tại sao vậy?

var foo = myFunction(); // `foo` becomes your function return value 
var bar = myFunction; // `bar` becomes your function 
bar(); 

---

Mã của bạn nên trông giống như:

$("#dialogBox").load('http://example.com').dialog({ 
    title: $(this).attr("data-dialog-title"), 
    close: function() { $(this).remove() }, 
    modal: true, 
    open : myFunction // this should work... 
}) 

Answer 2

Không ai trong số các giải pháp làm việc cho tôi. Tôi đoán đó là do cuộc gọi lại open không được gọi khi hộp thoại được hoàn tất mở. Tôi đã phải sử dụng một setTimeout để làm cho nó hoạt động.

$('#dialogBox').dialog('open'); 

setTimeout(function(){ 
    // myFunction(); 
},100); 

Nó rõ ràng phụ thuộc vào nội dung bên trong myFunction.

Answer 3

Đối với jQuery UI - v1.11.4, "hoàn thành" trong đoạn mã dưới đây không còn hoạt động:

show: { 
    effect: 'clip', 
    complete: function() { 
     console.log('done'); 
    } 
}, 

Các giải pháp mà đang làm việc cho jQuery UI - v1.11.4. :.

How to attach callback to jquery effect on dialog show?

Theo đề nghị của losnir, sử dụng $ (this) .parent() lời hứa() thực hiện:.

$("#dialog").dialog({ 
show: { 
    effect: "drop", 
    direction: "up", 
    duration: 1000 
}, 
hide: { 
    effect: "drop", 
    direction: "down", 
    duration: 1000 
}, 
open: function() { 
    $(this).parent().promise().done(function() { 
     console.log("[#Dialog] Opened"); 
    }); 
}, 
close: function() { 
    $(this).parent().promise().done(function() { 
     console.log("[#Dialog] Closed"); 
    }); 
} 
}); 

Hope this helps.

Answer 4

Tôi gặp sự cố khi tôi tải trang bên ngoài và tôi cũng muốn chạy một chức năng trên trang được tải. Rõ ràng bằng cách sử dụng mở: không hoạt động trong phương thức hộp thoại.

jQuery("#pop-sav").load('/external/page', my_function_name); 

jQuery("#pop-sav").dialog({ 
     resizable: false, 
     width:'90%', 
     autoReposition: true, 
     center: true, 
     position: 'top', 
     dialogClass: 'pop-dialog pop-sort' 
}); 

Các my_function_name có được mà không có dấu ngoặc và chỉ là tên của hàm để làm cho nó làm việc. Tôi không chắc chắn chính xác cách thức này hoạt động, nhưng nếu bạn làm nó ra cho tôi biết trong các ý kiến.

Answer 5

Bạn cũng có thể sử dụng tiêu điểm sự kiện sẽ kích hoạt sau khi hộp thoại mở và khi lấy nét.

Click here for documentation