Question

I added a click event to all elements on the page and now want to send the clicked target element to a server.
If the clicked element has an ID, then I can just send the ID, but if the element doesn’t have an ID, class, name, … , then how can I send an identifier (or selector) to the server which points to this exact element?

I tried sending the jquery.target object itself. However, this results in a
“Uncaught TypeError: Converting circular structure to JSON”
error.

Is there a way to serialize a jquery object or to create a selector based on the current element?

Answer 1

At least for form elements I managed to get a working version by creating a selector string from the target’s parents and then adding the input type and its name attribute, e.g.:

var target_selector = $(e.target).parents().map(function () { return this.tagName; }).get();
target_selector.reverse();
target_selector.push(e.target.tagName);
target_selector = target_selector.join('>');
target_selector = target_selector + '[name=\'' + $(e.target).attr('name') + '\']';

This does the trick at least for input elements.