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可能重复（wrapper和txtColor ID必须唯一，这意味着它们只能分配给一个元素），

Answer 3

我的猜测是，#txtColor和#wrapper都会动态附加到网页上。因此，它们将在稍后包含，在 jQuery代码执行之后。在执行jQuery代码时，页面上仍然没有#wrapper元素...

我猜对了吗？

Answer 4

很高兴看到你希望如何提供帮助，但有时候“我猜”或“其他可能性”让每个人都感到困惑，包括我。非常感谢Vega的jsfiddle链接，但不是很有帮助，但让我们从他那里拿走它:-)如果你将Pinkie的所有代码放在他的jsfiddler链接中并更新这一行

<div id="someDynamicElement">What a day?</div>

使用 live（）选项，您会看到它完全正常（将文本框的内容更改为红色，或绿色并单击外部）。但是它不适用于 on（）。为了解决这个问题，我们有两个令人惊讶的简单选项：

1）只需在包装内移动输入，不需要更改Pinkie的on（），或

<div id="wrapper">
    <input type="text" id="txtColor" />
    <div id="someDynamicElement">What a day?</div>
</div>

2）保持html不变并更新jquery作为此（我从on（）中删除了第二个参数并将选择器#wrapper更改为#txtColor）。

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

问题已修复，收到10,000英镑支票： - ）

如果你继续读到这里我也会猜测:-)你遇到的问题只是on（）的工作原理和选择器的混淆。我们在on（）中使用选择器有一些选项，正如您在api.jquery.com/on/

中看到的那样

还有一点，拜托，让我们在猜测答案之前先尝试编码:-)除非你是Guru我不是。另外，让我们尽可能保持原始代码不受影响，这样提问者就不会感到困惑因为对于经验不足的编码人员来说非常明显是非常明显的： - ）

大家好日子，让我们再写一天： - ）

P.S。还有一个提示，如果你还没有使用过jsfiddle，你设法更新html和javascript，你需要点击顶部菜单中的更新或运行： - ）

jQuery on（）而不是live（）不起作用

4 个答案: