Develop Reference

How to define events with JQuery using class or ids selectors before element has been loaded?

As most of us know, once an element has been loaded it is possible to attach an event to it by simply using the normal JQuery events.
The question is, what if I want to create a specific event, and define that an element with a specific class or id, will get that event automatically when they are loaded?
For example:
I have a function that checks whether the input that has been entered is numeric only, and allows only numbers to be entered inside an input.
To do that I add the class "numeric" to the input element.
Normally I would just run a script right after with JQuery or just by using the onkeypressed DOM event to attach that function to it.
However, let's assume I have an ajax request that attaches a new from page, with the class numeric in the proper input elements.
Using the script again using the same class selector will result in the event run 2 times for elements that were loaded earlier.. And for every time I run that script it will add that event over and over...
What I do now, is I used the "unbind" first, and then reattach the event to all elements, and it is working perfectly! But I am looking for more elegant solution.
Any suggestions?

You need to use the .on with event delegation
Syntax
$(parent-selector).on(event,target-selector,callback);
Note: The parent-selector must be parent element which is present in the DOM while binding the event, generally people use document and body, but for the performance you must have the nearest parent possible to the target
Example
$(document).on("click",".button",function(){
alert("Button Clicked");
});

Use the on function to attach event handlers for elements that do not exist.
$(document).on("keypress", ".numeric", function(){
//do something
});
JS Fiddle: http://jsfiddle.net/T34Ph/

How to check which elements are being targeted from .on with jQuery

I am unsure which elements are being targeted within my .on
$('.levelFour').on('mouseover','> li',function(m){
I wonder, is there a way to display which elements are being targeted?

Inside an event handler, this will be bound to the element that the event fired on. To create a jQuery object from it, use $(this).

You can run the following command in your browser console
$('.levelFour > li')
It will list all the elements which are targeted by the event handler at the point of execution. It will vary time to time depends on your dom structure.

Try this
$('.levelFour').on('mouseover','> li',function(m){
//something
}).css("border","1px solid red");
will change the border of element to red.
hope it helps.

Javascript event manipulating

I'm about to make an inplace editor with jquery. It works by clicking the text you want to edit and it replaces the content of it with an input. In the current case with a select tag.
It works fine except with the <a> tag... If you click on an <a> tag it confirms you what to do. You can accept edit mode or cancel it.
If you accept the edit mode, it changes the content of the <a> with a <select>. The problem comes after this point: If you click on the select the parent tag (<a>) fires up a new page load.
I tried to bind a click event on the <a> with a false return, but in this case the select wont work by mouse.
The other way to solve this I think is to bind a click event to the <select> and manipulating somehow the event object...
How to do this? Or is this a wrong approach?
UPDATE:
The base approach is invalid (select inside an a) but I found a solution: Remove the href parameter and you don't need ugly event hacking what does not even work in FF.
(similar problem and its explanation: Select tag inside hyperlink problem)

Don't change the content, change the element. Store the a element somewhere, replace it with a select, and then when you're done, replace back. This way you don't have to bother with the link firing.

function ask ( e )
{
e.preventDefault (); //prevents default browser action
//do whatever
}
element.addEventListener ("click", ask);

why do you want to manipulate the event object? can't you just leave the a-event to return false and set another eventhandler to the select-tag?

Wrapping the <select> in an <a> tag is not valid HTML. Also, hijacking the click event handler of the <a> to fire the select's one is considered an ugly hack. I would recommend you to put the <select> after the <a> in the DOM, and hide the link temporarily for the duration of the editing.
One thing I would try is to play with jQuery's DOM manipulating methods. For example:
$('#my_select').detach().insertAfter('#my_link');

Here is a neat demonstration
(From the example:)
$('a').click(function(event) {
event.preventDefault();
$('#edit').show(500);
});

The base approach is invalid (select inside an a) but I found a solution: Remove the href parameter and you don't need ugly event hacking what does not even work in FF.
(similar problem and its explanation: Select tag inside hyperlink problem)

Adding, Removing and Adding Element again removes its Event

I have a hyperlink with an ID when clicked will perform a certain event using JQuery. JQuery records the existence of this link on document load. Some time during the course of the users visit. I remove that link and the re-add it later. However, that even is not fired off again when that link is clicked after it has been removed and added.
Why is the case and how can I remedy it? Something to do with event binding?? Or shall I just add an onclick attribute?

You've been using a tag like this to add the click event:
$('#speciallink').click(function(){
// do something
return false;
});
This will bind the event to the elements that are selected at that moment.
Removing a link and adding it again, will effectively create a new element, without this event. You can use the "live" method to add rules that will be applied to events matching the rule, even when these elements are created after creating the rule:
$('#speciallink').live("click",function(){
// do something
return false;
});

You will need to bind that event handler to the new element when it is added or you could use live() instead of bind to achieve what you need.
Basically, the event handler references the original element. When that element is removed, even though a new element is added with the same id, it is a different element.

Don't remove the link from the DOM tree. Instead, just toggle its visibility with show() and hide().
Removing the element from the DOM tree with remove() will remove the element and all of its event handlers, even if you add it back with the same id.

If you completely remove the element, you will need to reattach any event listeners to the element when you recreate it.
Alternatively, just hide the element by setting its style to display:none with .show() and .hide()

jQuery : Attaching mouseup event to all textnodes of a container

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.

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.

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.

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.

$('#container *').mouseup(function() { ... });
That will bind the mouseup event handler to all nodes inside #container.
EDIT
Changed click -> mouseup to be clearer.

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