How to achieve the execution of the script.js file and other scripts when loading the component layout via AJAX?

Question

1C-Bitrix

Hello!

I customize the template of the product comparison component catalog.compare.result as part of the catalog component. When a product is removed from comparison, an ajax request is executed that pulls up the layout of the catalog.compare.result component with updated data.

The stretched layout contains numerous JS decorations, such as slick sliders, which are initialized in the script.js file of the catalog.compare.result component template. When you first open it, everything works as it should, but of course, after removing the product from the comparison, these sliders fall apart, since they are not initialized in the layout fragment returned by AJAX.

In order not to take a lot of time, the question is immediately: is there any most typical, preferred and adequate way to get the code from script.js to work in a situation where the component is loaded/updated via AJAX? Or, if this is not possible, achieve script processing from other files, for example, if the code is placed in the test.js file, and this file is included in template.php:

<!--  ** верстка слайдера **  -->
<script src="<?=$templateFolder?>/test.js"></script>

Further I will tell about what I have already tried, I apologize for the confusion.

A little earlier, I solved a similar problem: in the list of products (catalog.section) it was necessary to implement a "quick view" button that would open a modal window with the catalog.element component displaying the selected product. I created a separate file with a call to the catalog.element component, to which I sent the ID of the selected product with ajax, and in response I received the layout of this component:

...
$APPLICATION->ShowAjaxHead(false, false, false, true);
$APPLICATION->IncludeComponent("bitrix:catalog.element", ... );
...

At that time, calling the ShowAjaxHead () method before calling the component helped me. Thanks to it, the script.js file was executed, and the add to cart buttons worked in the modal window.

But now everything looks somehow more complicated, because I am in a complex component. I tried to call ShowAjaxHead() in the compare.php file, before calling the catalog.compare.result component, but in this case everything does not work at all correctly. Placed ShowAjaxHead() in other places as well, but at best it just didn't get any result.

Also tried to go the other way. The script.js file of the component template contains the deleteResult() function, which accepts the updated layout of the component. I moved the scripts that initialize the sliders into a separate test.js file and connected them in the template.php file with the script tag, and in the deleteResult() function I tried to process the layout coming in the result parameter using the BX.processHTML method in order to isolate the scripts from it and execute them using the BX.ajax.processScripts(). But the SCRIPT property of the returned object contains an empty array:

CompareClass.prototype.deleteResult = function(result)
  {
    var processed = BX.processHTML(result, false);
    console.log(processed); // в processed.SCRIPT - пустой массив

    BX.closeWait();
    BX.onCustomEvent('OnCompareChange');
    BX(this.wrapObjId).innerHTML = result;
  };

True, moving the initialization of the sliders into a separate test.js file and including it with the script tag still gave some effect: when we remove the first product from the comparison, the file fires and the sliders are initialized. But if you delete the second product after it, then the test.js file stops working, although the script tag that connects it is present in the html. I don’t understand why this is happening ... In general, I’m already sick of it, for sure there is a solution, and it’s somewhere nearby, but I don’t understand anything at all (