Member Avatar for vedmack

Hi

I'll describe the following scenario:

I got a table with td's and each of the got onchange and onclick

when i change value of a td and click on other td i get the onchange event(of the first td) being fired and then the onclick (of the other td) being fired

BUT...

if inside the onchange event I use transformNode function , it will result in disabling the onclick event of the other td...

How can I solve this issue and make the onclick event being fired ???

Thanks ahead,

Daniel.

  • 2 Contributors
  • 3 Replies
  • 112 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by Airshow

Dani AI

Generated

As described, calling transformNode from inside the onchange handler appears to cancel the click on the next cell. suggested reattaching handlers; that can hide the symptom but doesn't address the cause.

Most likely cause (how to check): the browser processes a click as a mousedown → mouseup → click sequence. When the first cell loses focus the onchange runs synchronously; if that code immediately replaces/rebuilds DOM under the mouse, the pending mousedown/mouseup/click for the target cell can be lost because the original nodes no longer exist. Verify this by logging mousedown, mouseup, click on the target TD and logging entry to your onchange — the ordering will make the problem obvious.

Two practical fixes:

  • Defer the transform so the click completes before DOM replacement. Example:
function onChangeHandler(e) {
  // capture any data needed for the transform, then defer DOM replacement
  setTimeout(function() {
    var html = xml.transformNode(xsl);
    container.innerHTML = html;
  }, 0);
}
  • Use event delegation so you don’t need per-TD handlers that get lost when nodes are replaced. Attach one listener to a parent that isn’t replaced:
var table = document.getElementById('myTable');
table.addEventListener('click', function(e) {
  var td = e.target;
  while (td && td.nodeName !== 'TD') td = td.parentNode;
  if (!td) return;
  // handle click
});

Additional notes: if the transform is heavy, consider requestIdleCallback (with a fallback) or compute the transform result first and only swap DOM after the click completes. Rebinding handlers after replacement is brittle; delegating or deferring the mutation is more robust.

Recommended Answers

All 3 Replies

Member Avatar for Airshow

I can only think that you have to reattach the onclick handler to the td after calling transformNode.

Airshow

Member Avatar for vedmack

I can only think that you have to reattach the onclick handler to the td after calling transformNode.

Airshow

I tried it with jQuery , but it seems not to work, it fires only for the "second" click and for the first (and the relevant one)


there must be some other way (wonder what)

I also tried window.event.stopbubble and .event.stopbubble with true and false...

nothing helped... :/

Member Avatar for Airshow

The only other thing I can think of is to avoid XSLT and achieve the effect of the transform with more straightforward DHTML/jquery/CSS manipulation.

(I avoid XSLT as much as possible)

Airshow

Edited by Airshow because: n/a
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.