jQuery on()而不是live()不起作用

Question

我有以下html标签

<input type="text" id="txtColor" />
<div id="wrapper">
    <div id="someDynamicElement"></div>
</div>

当我这样做它有效

$('#txtColor').live('change',function(){
    var x = this.value;
    $('#someDynamicElement').css('color',x);
});

但是当我尝试使用on()而不是使用live()以下代码时,它不起作用.我究竟做错了什么

$('#wrapper').on('change','#txtColor',function(){
    var x = this.value;
    $('#someDynamicElement').css('color',x);
});

#someDynamicElement动态添加到页面的元素在哪里.

Answer 1

它不工作的原因是,当你从改变live()到on()你需要更改设置监听到的文档元素的元素.试试这个:

$(document).on('change','#txtColor',function(){
    console.log($(this).val());
});

Answer 2

wrapper当具有ID 的元素不可访问时（例如，您不等待 DOM 准备好），您可能会调用代码。

尝试这样解决这个问题：

$(function(){
    $('#wrapper').on('change','#txtColor',function(){
        var x = this.value;
        $('#someDynamicElement').css('color',x);
    });
});

当 DOM 准备好时，它会将change事件处理程序附加到元素。#wrapper

其他可能性（其中一些其他人提到过）：

• #txtColor不在 之内#wrapper，
• #wrapper是动态添加的，
• ID 可以重复（IDwrapper和txtColorID 都必须是唯一的，这意味着它们只能分配给一个元素），