My JavaScript stops working after a jQuery AJAX request

[Alle]

Hi.

I am fairly new to JavaScript and jQuery. I have encountered a problem that is maybe obvious to people who are more knowledgeable about JavaScript.

I am working on a WordPress site with WooCommerce and I want to try to load new content with AJAX, when a product category is clicked on. So I use jQuery’s .load method. The script for the AJAX is fairly short, and follows here:

if (window.location.href.includes('domain/produkt')) {
	
	var elementProduktKategoriMeny = document.getElementsByClassName('widget_yith_wc_category_accordion');
	var elementPKM0 = elementProduktKategoriMeny[0];
		
	jQuery(elementPKM0).on('click', function(e) {
		
		e.preventDefault();

		var ElementClicked = e.target;
		var Address = ElementClicked.href;
		
		jQuery('#content').load(Address + " #content .col-full");
		jQuery(".storefront-breadcrumb").first().load(Address + " .storefront-breadcrumb .col-full");
		
	});
}

It works for loading the new content. But after having clicked on a product category and loading the new content, all the rest of my JavaScript stops working. All of my JavaScript is in one file. For example, I have some hamburgermenu-toggles written with JavaScript, and they stop working after the AJAX function has been used.

I hope that someone can help me with this, and I hope you’ll have some patience with me, if the reason for this problem is obvious.

[Martyr2]

I don’t know if you are aware of the JavaScript console that is built into browsers, but if you right click your page and choose “Inspect” a set of developer tools will appear. One tab is “Console”. Here you can see if errors are occurring in your JavaScript. If you see some errors, please let us know what those errors are. They are usually highlighted in red.

I am guessing that after your load, you are running into an error which prevents the rest of the code from running as it should.

[Alle]

Hi. Thank you a lot for replying. I have now checked in the console, and it shows a lot of information about cookies, like this: Cookie “wp-settings-1” will be soon treated as cross-site cookie against… …because the scheme does not match.

There is one line that is not about cookies, and it says the following:
This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”.

I tried removing one of the load statements, and I discovered that when only the breadcrumbs are updated there is no problem with using any of the JavaScript in my file.

So now I am thinking of trying to load the #primary and #secondary divs separately.

Now I have loaded them separately and found out that my JavaScript works after loading the div#primary only, but not when I load the #secondary. So its something with the div#secondary that leads to my JavaScript not working after the load.

At least I feel a step or two closer to solving this.

[Alle]

Hi.

Now I have gotten my JavaScript to work in the regard in the first post, with the following script:

if ((window.location.href.includes('domain/produkt')) || (window.location.href == 'httpdomain')
 || (window.location.href == 'httpsdomain')) {
var elementProduktKategoriMeny = document.getElementsByClassName('widget_yith_wc_category_accordion');
	var elementPKM0 = elementProduktKategoriMeny[0];

	jQuery(elementPKM0).on('click', function(e) {
		
		e.preventDefault();
		
		var ElementClicked = e.target;
		var Address = ElementClicked.href;

		jQuery(".storefront-breadcrumb").first().load(Address + " .storefront-breadcrumb .col-full");
		jQuery('#content .col-full #primary').load(Address + " #content .col-full #primary #main");

		var postResult = jQuery.post( Address, {} );
		postResult.done(function( data ) {
		var secondaryContent1 = jQuery( data ).find( "#content .col-full #secondary .widget_yith_wc_category_accordion .ywcca_widget_title" );
		var secondaryContent2 = jQuery( data ).find( "#content .col-full #secondary .widget_yith_wc_category_accordion .ywcca_category_accordion_widget" );
		jQuery( "#content .col-full #secondary .widget_yith_wc_category_accordion" ).empty().append( secondaryContent1 ).append(secondaryContent2);
		});

	});	
}

I also changed one of my hamburger-menu toggles to toggle the main accordion widget which is a div, instead of toggling the ul in it which contains the menu list.

However, now I have a new problem. I am using the YITH accordion plugin for WooCommerce; and after clicking on anything that triggers my JavaScript above, it is loading everything as I want to but the accordion opening- and closing icons disappear. When appearing there is this line in the HTML, in the li:

<i class="icon-plus"></i>

But after running the JavaScript above, those elements disappear from the page. Or rather, they do not appear in the newly loaded element.

Why is this?

I am trying the free YITH accordion plugin for now, but that shouldn’t make any difference.