Member Avatar for filch

I have a page at the following url:

Pick a continent, select a country ( orange if in Asia, green if in Africa) click on one of the bullets and some info pops up. Works fine in FF and Safari but in IE, it works (almost) once, but then goes dead i.e. the links seem to disappear. Anyone have any idea/help to get this working in all browsers?

Dave

  • 2 Contributors
  • 3 Replies
  • 109 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by pritaeas

Dani AI

Generated

reported the map UI works once in IE and then the bullets stop responding; notes Opera shows no popups. Narrowing the fault down to either (a) the click handler not firing after the first interaction, (b) a DOM element left on top blocking clicks, or (c) a script error that aborts later behavior will get you to a fix quickly.

Quick reproducible checks:

  • Open IE/Opera dev tools (F12) and watch the Console while clicking the bullets. An uncaught exception will usually show up there and stop further handling.
  • After the first successful click, inspect the DOM to see whether the bullet nodes were replaced (innerHTML updates remove direct handlers) or whether a positioned DIV (overlay/modal) remains covering the map.
  • Temporarily add simple logging at the top of the click handler to confirm whether it fires every time.

Common causes and fixes:

  • Handlers lost because code replaces nodes with innerHTML: either re-bind after replacement or use event delegation on a stable parent so new bullets are handled automatically.
  • An overlay/modal left visible and catching clicks: toggle it off in dev tools to test, then ensure it is removed or receives pointer events only when intended.
  • Cross-browser event handling differences and this/event object behavior: attach listeners using a robust pattern and prevent default actions in a cross-browser way.

A small, portable pattern to attach handlers and prevent default:

function onClick(e){
  e = e || window.event;
  if (e.preventDefault) e.preventDefault();
  else e.returnValue = false;
  // handler body...
}

if (elem.addEventListener) elem.addEventListener('click', onClick, false);
else if (elem.attachEvent) elem.attachEvent('onclick', onClick);

References: MDN on addEventListener, the Element.innerHTML behaviour, and MDN’s event guide (see the section on event delegation) — these explain the patterns above and why delegation/rebinding fixes this class of bugs.

Recommended Answers

All 3 Replies

Member Avatar for pritaeas

Opera is not showing anything.

Member Avatar for filch

When you say not showing anything ... you mean the map? Or the entire page?

Dave

Member Avatar for pritaeas

No popup on the bullets.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.