Initialization of components added from AJAX call

[NilsWeinander-KulturIT]

I have an ul where the li elements are fetched dynamically with an AJAX call (basically a sort of autocomplete related search help). These li elements have an x-data and an x-on:click:

<li 
	class="mdc-list-item indented" 
	x-data="{
		query:  'nils' ,
		indexField: 'nativeCompoundName',
		useContainer: 'false'
	}" 
	x-on:click="$store.lists.search(query, indexField, useContainer)"
>
	<span class="mdc-list-item__ripple"></span>
	<span class="mdc-list-item__text">
		Namn/benämning - Svenska
		 <span class="fi fi-se"></span> 
		(960)
	</span>
</li>

This works just fine in Firefox. However, in Chrome and Edge, the x-on:click is not active until I have first right-clicked the element. So it seems like the initializatio of the component isn't immediate. What am I doing wrong here?

Addition: the li elements are added to the ul like this:

const searchCount = document.getElementById("main-search-count");
searchCount.innerHTML = content;  // content is a string with the HTML

Do I have to add them some other way than setting innerHtml? If so, how?

[ekwoka]

No, it works automatically. I can't reproduce this at all.

[NilsWeinander-KulturIT]

Sorry, I have been barking up the wrong tree. The problem is solved, even though I don't quite understand why it occurred. The search input field has :focus styling in CSS, including expanded width. The li that couldn't be clicked is in a "dropdown" menu below the search input field. On click the search input field loses focus and :focus styling, shrinking back to original width. The dropdown is anchored to the search input field, so it moves horizontally and this seems to be what screws up the click event. Since this is also rather ugly I changed the CSS so the search input field is fixed in size and now it works.