javascript - jQuery：思考 on() 而不是 live() ，关于动态生成的东西的传播

Question

得到这个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>

mother是在页面中，但都是孩子，并且select是input动态生成的

尝试使用以下方式调用它们：

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

Javascript什么都不说。。

如何最好地使用on()而不是live()？...因为有了live()它更容易弄清楚。

谢谢。

Answer 1

.live() 已弃用并删除，完全不要使用它 不推荐使用的 版本：1.7，已删除：1.9

像这样使用

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

Answer 2

你也可以使用这个 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 3

您的事件必须用空格分隔：blur change，而不是 blur,change。

Answer 4

您页面的其他地方有问题。我创建了一个小提琴，它显示这个工作得很好：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');
});