jquery 1.11.1 - live vs on

Question

As for 1.7 the live event is deprecated - i'm using currently 1.11.1 jquery version. Now, also on the docs says that for 1.9 jquery the live was removed - fine by me. For the next case

<script type="text/javascript">

    $(document).ready()
{
    $("#submitFile").live('click', function (e) {
        alert('button clicked');
        e.preventDefault();
        alert(1); 
    });

    $('#fileCtrl').live('change', function (event) {
        alert(1);
    });

   <!--  this was a typo from-->
    $('#fileCtrl').live('on', function (event) {
        alert(1);
    });

}
</script>



<div id="uploadDiv">
    <input name="import" value="import" type="file" id="fileCtrl" />
    <input type="submit" value="export" id="fileupload"  />
</div>

for my current project i had to re-use live. the "on" event simple doesn't fire. any reason why? i tried with live and it work, event that the it says on doc that it was removed on version 1.9. Any tip on this? Why is live still working and why "on" doesn't?

Thanks in advance.

Can you provide the real code you are writing as the example seems misleading and does not appear to show the actual problem you are trying to solve? You would probably not use `on` *or* `live` in that simple situation shown. — iCollect.it Ltd, Oct 30 '14 at 11:32
@Vohuman: There is no dynamic loading here, so those "duplicate" are not appropriate. — iCollect.it Ltd, Oct 30 '14 at 11:40
@TrueBlueAussie Well, how do you know? Then why "i had to re-use live". I chose that question as it's answers provide sufficient info about "`live` vs `on`" issue. However, I don't want to religiously insist that it's a duplicate of that question, so, I'll reopen the question! — Ram, Oct 30 '14 at 11:47
Your ready event has a syntax error and won't fire regardless of which event bindings you use.`$(document).ready(function(){/* code here */});` — Chris Spittles, Oct 30 '14 at 11:52
@ Vohuman: There are multiple problems with the sample and the intended aim, so I doubt the other questions would have helped the OP. Thanks for reopening :) — iCollect.it Ltd, Oct 30 '14 at 12:02

score 4 · Answer 1 · answered Oct 30 '14 at 11:23

4

You would need to re-arange your calling stack. That means, you need to target the parent node which is able to catch all click events you desire and bind it like

$('the_parent_node_probably_document_body').on('click', '#submitFile', function( e ) {
});

having that said, it doesn't really make much sense to delegate any event from an ID-selector, since it will only appear once in your markup, you actually want to delegate events from many nodes. So I'm confused right now.

answered Oct 30 '14 at 11:23

jAndy

231,737
57
305
359

As the elements are not dynamic, the use of `live` or `on` appears unnecessary to begin with (and certainly does not need a delegated event handler). You are not the only one confused here :) – iCollect.it Ltd Oct 30 '14 at 11:31

score 0 · Answer 2 · answered Oct 30 '14 at 11:27

Element does not have 'on' event.

$('#fileCtrl').live('change', function (event) {
    alert(1);
});

$('#fileCtrl').live('on', function (event) {
    alert(1);
});

Your code mean same reaction when 'change' or 'on' event fired. May be you are messing up 'change' event with 'on'?

score 0 · Answer 3 · answered Oct 30 '14 at 11:29

0

on is a function, not a DOM event. The event is still called 'change':

$('#fileCtrl').on('change', function (event) {
    alert(1);
});

answered Oct 30 '14 at 11:29

Dominic

62,658
20
139
163

it's working like that. in fact that was my first try - i then pass to use "live" - which works. – dr.Xis Oct 30 '14 at 11:55

score 0 · Answer 4 · answered Oct 30 '14 at 11:58

As shown in the simple sample, you would not bother to use live or on (your third example appears to be a mistake as there is no on event. on is a jQuery method). You also have a missing function and closing bracket on your DOM ready handler.

e.g. use plain click and change methods:

$(document).ready(function()
{
    $("#submitFile").click(function (e) {
        alert('button clicked');
        e.preventDefault();
        alert(1); 
    });

    $('#fileCtrl').change(function (event) {
        alert(1);
    });
});

Note the last example was invalid for this version, so I have excluded it.

If you do actually want to use on, the new syntax would be:

$(document).ready(function()
{
    $("#submitFile").on('click', function (e) {
        alert('button clicked');
        e.preventDefault();
        alert(1); 
    });

    $('#fileCtrl').on('change', function (event) {
        alert(1);
    });
});

And finally, if the elements are added to the page dynamically, use delegated event handlers, connected to a non-changing ancestor (document being the default):

$(document).ready(function()
{
    $(document).on('click', "#submitFile", function (e) {
        alert('button clicked');
        e.preventDefault();
        alert(1); 
    });

    $(document).on('change', '#fileCtrl', function (event) {
        alert(1);
    });
});

Re: DOM ready handlers. There is a neater shortcut for DOM ready which is simply:

$(function(){ YOUR CODE HERE });

score 0 · Answer 5 · answered Oct 30 '14 at 12:07

0

i found my error!!!

it was on document ready declaration - how stupid of me!

$(document).ready()
{

insetead of $(document).ready(function()

thanks everybody :)

answered Oct 30 '14 at 12:07

dr.Xis

127
2
4
11

Yes, you will find that mentioned in my answer below. Please take the time to read all answers so that people will continue to provide them :) – iCollect.it Ltd Oct 31 '14 at 09:30

jquery 1.11.1 - live vs on

5 Answers5