jQuery : Attaching mouseup event to all textnodes of a container

Question

I want to attach a "mouseup" event on all nodes of a container, including text nodes using jQuery. How do I do that?

Update:

If I had some HTML fragment like this:

<p>Some text node <strong>strong text</strong> another text node.</p>

Currently, $("p *") will apply the event to the <p> and <strong> but not to the 2 textnodes within <p> separately. Modifying the source to add classes is not an option.

Answer 1

I think the easiest would be to add a class to all your nodes. The jquery selector will be as simple as : $('.yourClassName').dostuff()

Answer 2

$('#container *').mouseup(function() { ... });

That will bind the mouseup event handler to all nodes inside #container.

EDIT

Changed click -> mouseup to be clearer.

Answer 3

While Tatu's answer ought to work (except use .mouseup instead of .click), are you sure you actually need an event handler on every single node? If you bind using

$('#container').mouseup(function(event){//code})

the event bubbling model will call that same func anytime the mouseup event occurs on any element inside #container, and the DOM node that actually triggered the event will be contained in the event.target property. This is much more efficient in most cases.

Answer 4

You cannot set event handlers on a Text node. Text nodes do not implement the EventTarget interface like Element nodes, the Document node and the window object do.

You should never need to, either. Set one mouseup handler on the parent element and you will get mouseup events for all its child content. This is because the mouseup event ‘bubbles’ up through its ancestors.

Answer 5

bobince is right that you cannot set event handlers on a Text node. It sounds like you want something like

<p><span>Some text node</span> <strong>strong text</strong><span> another text node.</span></p>

and the events would get attached to the span tags. However that wouldn't work if you can't change the source.