How to sort AJAX products in Bitrix without using the ajax setting for the catalog component?

Question

1C-Bitrix

Now sorting works on the basis of GET parameters with page reload, I made a script that does sorting using the jquery.load method, that is, products are pulled to the page by following the url with get parameters, while the page is not reloaded.

The problem is that after such an Ajax loading, the scripts on the cards in the list do not work, that is, the quantity selection and the buy button do not work ...

Is there another way to do Ajax sorting in Bitrix or maybe someone knows what js function can be run after Ajax is completed to update scripts for cards?

Answer 1

In section.php you need to do RestartBuffer
In ajax response

var ob = BX.processHTML(data);
BX.ajax.processScripts(ob.SCRIPT);

Answer 2

The problem is that after such an Ajax loading, the scripts on the cards in the list do not work, that is, the quantity selection and the purchase button do not work...

That's not the problem. Just yesterday I was arguing with the coder - the problem is that you use jquery and ajax - don't do it like that. More precisely, it is possible, but very carefully, understanding what is happening.
And in principle, they are contraindicated to each other, because ajax updates the DOM, and jquery works with events that are hung on DOM elements.
Reshniya such:
1 The most simple - to outweigh all events on document or body. Well, i.e. you have some kind of script that is hung on '.baybutton' let's say something like this $('.baybutton').click Change it to $(document).on(.baybutton','click'' or something So, accordingly, when you replace this button with ajax, the event will remain on it, as it hangs on the document.
2 More complicated, but more accurate - add separate selectors to elements and hang events on them through a special function call, deleting these selectors after hanging. Call the hover function after the page is ready and after every ajax update. To do this, it makes sense to write a separate ajax dispatcher, and pass all calls through it.
And yes - Bitrix has nothing to do with it.

Answer 3

if an event is hung on an element, then it is hung on an existing element, and does not work on a newly loaded via ajax, you need to hang the event on a static parent element or the entire document.
$({parent element}).on({event},{event element},function(event){...});
If you hang on the document, you must take into account that all the specified elements will be processed, if on the parent element, then only those elements that are inside the parent element are processed.
In this version, events will work on new objects loaded by ajax.
It is easier to transfer sorting and other parameters by POST, it is at least more convenient, especially when you take into account filtering and pagination in processing (I think you will encounter this in the future)