jQuery: Thinking on() instead of live() ,propagations on Dynamically Generated Stuffs

Question

Got this HTML:

<div id="mother">
   <select id="sel" name="sel">
     <option value="1">Un</option>

     <option value="2">Deux</option>
     <option value="3">Trois</option>
</select>

<input id="in" name="in"/>
</div>

The mother is in the page but both children, select and input are dynamically generated

Tried to call them by using something like:

$('body').on('blur change','#mother input, #mother select',function(){
    alert($(this).attr('id'))
    })

Javascript is saying nothing all..

How can this be best done using on() instead of live()? ... because with live() it was kinda easier to figure out.

Thanks.

Answer 1

.live() is deprecated and removed, don't use it at all version deprecated: 1.7, removed: 1.9

use on like this

$('body').on('blur change', '#mother input, #mother select', function () {
    alert($(this).attr('id'));
});

Answer 2

Your events must be space separated: blur change, not blur,change.

Answer 3

You can also use this sintax :

<div id="mother">
   <select id="sel" name="sel">
     <option value="1">1</option>

     <option value="2">2</option>
     <option value="3">3</option>
</select>

<input id="in" name="in"/>
</div>

JS

$('body').on({
        blur: function () {
            alert("blur");
        },
        change: function () {
            alert("change");
        }
    }, '#mother input, #mother select'); 

http://jsfiddle.net/FccfN/1/

Answer 4

There is something wrong elsewhere in your page. I created a Fiddle that shows this working just fine: http://jsfiddle.net/evictor/Dnsm8/

<div id="mother">
</div>

JS:

$(function() {
    $('body').on('blur change','#mother input, #mother select',function(){
        alert($(this).attr('id'))
    });

    $('<input id="test" />').appendTo('#mother');
});