Thực thi Javascript khi một widget được thêm vào trong phần cuối

Tôi có các widget có các điều khiển javascript kèm theo chúng.

Nếu tiện ích có mặt khi trang quản trị tiện ích tải, các điều khiển hoạt động chính xác.

Khi tôi thêm một tiện ích mới, chúng không hoạt động chính xác, tôi nhận được đánh dấu, nhưng không có sự kiện javascript nào có hiệu lực.

Nếu tôi lưu tiện ích mới, khi biểu mẫu tải lại, các điều khiển được tạo chính xác và bây giờ hoạt động.

Làm mới trang cũng khắc phục sự cố, nhưng chỉ đối với các tiện ích hiện có. Các vật dụng mới vẫn có vấn đề này.

Cụ thể tôi đang chạy selectize trên các đầu vào được chọn tại các điểm sau:

• tài liệu đã sẵn sàng
• Hoàn thành

Tôi đã xác minh rằng mã của tôi được chạy trên mỗi sự kiện như mong muốn, nhưng kết quả không như mong đợi.

Đây là một plugin thử nghiệm chứng minh vấn đề:

https://gist.github.com/Tarendai/8466299

Bạn sẽ thấy tôi có một bộ đếm tăng với mọi yếu tố được chọn mà nó thấy rằng nó có thể chuyển đổi.

Ghi chú:

• Khi trang tiện ích tải, tôi có thể thấy bộ đếm tăng lên trong bảng điều khiển JS như mong đợi
• Tuy nhiên, khi tôi thêm một tiện ích mới, mã sẽ được chạy, nó không tìm thấy bất kỳ phần tử chọn nào mà nó có thể chạy, như được chứng minh bởi Found.length là 0. Điều này không nên xảy ra, vì mọi widget mới thuộc loại đó nên có một yếu tố chọn
• các phần tử chọn có một lớp để xác định chúng, lớp này được loại bỏ sau khi thư viện chọn được áp dụng để ngăn ngừa trùng lặp và xử lý lại trên các widget hiện có.
• Trước khi sử dụng selectize, tôi đã sử dụng Select2, vấn đề tương tự
• Nhận xét mã AJAX, tôi mong muốn các widget mới có đầu vào chọn chuẩn. Họ không. Tôi không biết tại sao lại như vậy

Vậy làm cách nào để làm cho điều khiển chọn lọc hoạt động mà không yêu cầu người dùng làm mới / nhấp lưu trước khi thực hiện thay đổi?

Tin tốt,

Tôi đã sửa nó.

Xin lỗi vì đã bỏ lỡ ý chính của bạn trong bình luận ban đầu của tôi và cho bạn một câu trả lời mà bạn đã thực hiện. Điều đó sẽ dạy tôi trả lời trên điện thoại khi đi tàu!

Việc bạn sử dụng ajaxstop là chính xác. Hầu hết các phần mềm hoạt động chính xác, bạn có thể thấy các kiểu css đang được khởi tạo và các thay đổi trong DOM.

Vấn đề nằm ở thực tế với bộ chọn của bạn.

Điều này là do nội dung widget không được tải thông qua ajax, trên thực tế, nó sao chép nó từ cột bên trái nơi nó bị ẩn và sau đó thực hiện cuộc gọi ajax để lưu vị trí của widget trong cột bên phải. Điều này giải thích tại sao ajaxstop hoạt động một điều trị, thậm chí nội dung được cho là được nhân bản. Tuy nhiên, vì có một phiên bản ẩn của tiện ích trong cột bên trái, nên JS của bạn đang bắt đầu từ đó. Như vậy khi bạn kéo nó vào cột bên tay phải, bạn sẽ nhận được một bản sao được xáo trộn của tiện ích ẩn.

Vì vậy, bạn cần phải chọn một ở phía bên trái. Dưới đây là mã sửa:

<script>
jQuery( document ).ready( function( $ ) {
    function runSelect() {
        var found = $( '#widgets-right select.testselectize' );
        found.each( function( index, value ) {

            $( value ).selectize();
                .removeClass( 'testselectize' )
                .addClass( 'run-' + window.counter );

            console.log( $val );
            window.counter++;
        } );
    }

    window.counter = 1;

    runSelect();

    $( document ).ajaxStop( function() {
        runSelect();
    } );
} );
</script>

Như @ aaron-holbrook đã nhận xét một cách tiếp cận sạch hơn sẽ được thực hiện:

jQuery(document).on('widget-updated widget-added', function(){
    // your code to run
});

Trong nhiều trường hợp, bạn cũng sẽ muốn chạy JS khi tải trang cũng như khi các widget được cập nhật. Bạn có thể làm như vậy.

function handle_widget_loading(){
   // your code to run
}
jQuery(document).ready( handle_widget_loading );
jQuery(document).on('widget-updated widget-added', handle_widget_loading );

Chỉ cần dán vào đây để tham khảo là câu trả lời dễ dàng hơn nhiều để tìm thấy những bình luận đó