What is the technical difference between this:
$('#myid').keypress(function(e)
{
if(e.which == 13) {
alert('test');
}
});
and this:
$(document).on('keypress', '#myid', function(e) {
{
if(e.which == 13) {
alert('test');
}
});
I have a jQuery script which runs with the second example but not with the first
They're using two completely different events. The first one uses the keypress event:
$('#myid').keypress(function(e)
while the second one uses the click event:
$(document).on('click', '#myid', function(e) {
In addition to that, the first one is binding directly to the #myid element, while the second one is binding to the document and filtering events based on the #myid selector. The resulting observed effect of these two kinds of binding is probably the same, but they accomplish that effect in very different ways.
i have a Jquery script which runs with the second example but not with the first
That's very unlikely, since the .which property on a click event doesn't equal 13. Though it depends on what you mean by "runs". You may be observing something entirely different than what you're describing. For example, a key difference between these two types of binding is that the second one is used to capture events from dynamically-added DOM elements. So if you try to use the first example on DOM elements which are loaded via AJAX then it won't find those elements when attaching the event handler.
There are two things going on here, so I will split my answer accordingly.
1. With regards to event binding in your code:
$('#myid').keypress(function(e){//...});
Is binding the keypress event to the HTML element whose id is myid. Therefore any keypress event that occur within said element, such as focus, tab, etc; they will all be handled by the keypress function.
$(document).on('click', '#myid', function(e) { //... });
Binds the click event handler to the entire document (website), as well as the HTML element whose id is myid. This is the ability of the on function which I will further describe below.
The on event handler can be very useful if you plan on binding one or more events to one or more HTML elements. I like to use it particularly when doing Chaining, as it can be both syntactically and efficiently better than writing one event handler at a time.
2. With regards to event handlers:
The difference between on and keypress is that the keypress is a shortcut for the event handler:
on('keypress', function(e){//...});
Meaning it is the same thing when it comes down to what it does.
Whereas on is used to attach event handlers in general. Such as the click event handler:
on('click', function(e){//...});
As well as the keypress event handler:
on('keypress', function(e){//...});.
... and many others.
The documentation in jQuery establishes very clearly how these functions work, so if you have any more questions after reading through the docs linked here, feel free to ask :-)
