Soy bastante nuevo en escribir código en general. solo ha pasado un año desde que empecé.

Tengo un sitio web que saca un concurso de firestore. Si el concurso tiene diferentes categorías, mostrará las categorías y permitirá al cliente elegir la categoría primero antes de mostrar los candidatos para esa categoría.

El problema que tengo es que al hacer clic en la categoría, se dispara la alerta pero se ignora la función real. Esto solo sucede en IOS.

He intentado múltiples soluciones aquí.

Añadido cursor:puntero.

Agregué role="button" cuando usé un div primero en lugar de un botón.

Probé .on('clic', y así sucesivamente).

Probé .click().

Intenté envolverlo $(documento).listo().

Este es estático <div id="main-content-container" class="main-content-container"></div>

 const mainContentContainer = document.getElementById('main-content-container'); renderPageant() async function renderPageant() { let html = ` <div id="render-candidates-container" class="render-candidates-container"></div> ` mainContentContainer.innerHTML = html; const renderCandidatesContainer = document.getElementById('render-candidates-container'); const doc_1 = await db.collection('Pageants').doc(value).get(); const category = doc_1.data().isCategory if(category == true) { const querySnapshot = await db.collection('Pageants').doc(value).collection('Categories').get(); $('#render-candidates-container').empty(); console.log(querySnapshot.size) querySnapshot.forEach((doc_2) => { const button = document.createElement('button'); button.setAttribute('id', doc_2.id + '-category-image'); button.setAttribute('class', 'cursorPointerClass') button.innerHTML = ` <img src="${doc_2.data().categoryBanner}" alt="category banner"> ` renderCandidatesContainer.insertBefore(button, renderCandidatesContainer.childNodes[3]); const categoryImage = document.getElementById(doc_2.id + '-category-image'); categoryImage.addEventListener('click', function() { alert('Fired!') var x = { pageantID: doc_1.id, categoryID: doc_2.id, category: true, ovarallVotes: doc_1.data().overallVotes } timerCandBlock(x); }) }) return } var x = { pageantID: doc_1.id, categoryID: 'undefined', category: false, ovarallVotes: doc_1.data().overallVotes } timerCandBlock(x); return }

temporizadorCandBlock(x); funciona bien, ya que en realidad funciona en Chrome PC o Chrome Android. Incluso funciona dentro del navegador de la aplicación de Facebook. Pero simplemente no funciona cuando está en IOS.

¿Que me estoy perdiendo aqui?