Xóa và đăng ký lại Widget trên một phần tử

Question

Tôi gặp sự cố. Tôi đang áp dụng tiện ích trên phần tử select. Khi tôi tải lại cùng một giá trị phần tử select, tôi sẽ xóa tiện ích trên phần tử select và đăng ký lại. Nhưng trong khi áp dụng lại các widget trên cùng một yếu tố, những thay đổi không phản ánh.

Dưới đây là HTML lựa chọn công bố:

<select id="countries" class="multiselect" multiple="multiple" name="countries"> 
     <option value="USA">United States</option> 
     ... 
</select> 

Để áp dụng các widget trên cùng một nguyên tố:

function applyWidget(){ 
    $(".multiselect").multiselect(); 
} 

Khi widget được áp dụng, đó là tạo ra một div với class=".ui-multiselect".

Để loại bỏ các lớp phụ tùng:

function removeWidget(){ 
    $(".ui-multiselect").remove(); 
} 

Gọi phương thức applyWidget() lần đầu tiên được làm việc tốt. Gọi lần thứ hai không hoạt động. Làm cách nào để tải lại tiện ích con trên phần tử?

Answer 1

Bạn phải hủy tiện ích con hoặc nó sẽ không được khôi phục.

function removeWidget() { 
    $(".ui-multiselect").multiselect("destroy"); 
    $(".ui-multiselect").multiselect(); 
} 

Answer 2

Thứ nhất, phụ tùng của bạn cần phải có một phương pháp destroy sẵn, và làm thế nào bạn làm điều đó phụ thuộc vào việc bạn đang sử dụng jQueryUI 1.8 và bên dưới hoặc jQueryUI 1.9 trở lên.

Đối với các ví dụ này, tôi đang làm cho giả định rằng bạn đang tham khảo các multiselect div với đoạn mã sau:

_create: function() { 
    this.multiselect = $("<div>").addClass("ui-multiselect")... 
} 

Nếu bạn đang sử dụng jQuery 1.8, widget của bạn nên xác định destroy:

destroy: function() 
{ 
    this.multiselect.remove(); 
    $.Widget.prototype.destroy.call(this); 
} 

Nếu không, trong jQuery 1.9+, bạn cần xác định _destroy:

_destroy: function() 
{ 
    this.multiselect.remove(); 
} 

Lưu ý rằng bạn chỉ bao gồm một trong hai phương pháp trên, tùy thuộc vào phiên bản jQueryUI của bạn và phiên bản 1.9 được đặt trước bởi dấu gạch dưới _. Theo jQueryUI 1.9, không xác định tiêu diệt mà không có dấu gạch dưới, bởi vì nhà máy widget định nghĩa phương thức đó và bạn sẽ ghi đè (và ngắt) phương thức.

Sau khi hoàn tất, bạn cần thay đổi mã của mình để bạn "hủy" tiện ích đó trước khi tạo lại.

function removeWidget(){ 
    $(".multiselect").multiselect("destroy"); 
}