All javascript won’t work after Pjax reloads in Yii2

Your support helps keep this blog running! Secure payments via Paypal and Stripe.

Yii version 2.0.13.1

When you work with Pjax either Pjax jquery or Pjax module, you may face the same issue as me. I am working on the Pjax widget in Yii2.0. The widget uses Pjax jquery.

Problem
Every time the Pjax reloads, all js that attached to DOM in Pjax container won’t work.

Cause
After Pjax finishes reloading, the js that set to DOM in Pjax container will not pick up on these changes.

Solution
You must reinitialize the js to DOM after Pjax reloads.

Example

jQuery(document).ready(function ($) {
    function init(){
        initialize plugin1; 
        initialize plugin2;
    }
    init();
    
    $(document).on('ready pjax:end', function (event) {
        init();
    });
    
});

More detail
The instruction can be found in Pjax jquery link.

Your support helps keep this blog running! Secure payments via Paypal and Stripe.