jQuery 更改事件未在输入元素上触发

Question

首先，我检查了与我的问题相似的每个主题，不幸的是，我还没有找到我的答案。我试图结合一些答案，但没有成功。 (注:刚开始学习jQuery)

所以这是我的问题:

我创建了一个包含四个文本输入框和一个按钮的表单。每个输入里面都有一个 svg 图标和一个占位符文本。

HTML:

<div class="first-field">
<input class="text" type="text" placeholder="Uw naam.." value="">
<svg class="unfilled" id="svg_user">
</svg>
</div>

(我删除了 svg 数据，因为它不相关。)

svg 图标与占位符的颜色相同。输入的文字颜色稍浅。我想将 svg 图标的颜色更改为与输入文本相同的颜色，但只有在输入内容时才可以。

首先，我尝试在输入内容时发出警报，以检查它是否知道输入内容的时间。我使用了 jQuery 网站上的示例:

$( ".text" ).change(function() {
alert( "Handler for .change() called." );
});

这不起作用，根据文档，它应该起作用。

我在堆栈上找到了这个解决方案，但这也行不通:

$(document).ready(function () {
$('.text').keyup(function () { alert('test'); });
});

没有警报，我无法继续构建解决方案。快速总结:

SVG 图标需要更改为与输入的文本相同的颜色，但只有在输入内容时才需要。删除后，它应该变回占位符文本的颜色。

现在，我感谢大家的帮助。

Answer 1

需要将代码包装在 document.ready 包装器中的原因是因为代码希望在加载时立即运行。通常，代码在 DOM 创建之前运行(即页面已完全呈现)——因此代码需要访问的一些元素还不存在——代码会中断。

这是一个使用 document.ready 包装器的例子:

HTML:

<div class="first-field">
    <input class="text" type="text" placeholder="Uw naam.." value="" />
    <svg class="unfilled" id="svg_user"></svg>
</div>

javascript/jQuery:

var ran=0;
$(document).ready(function() {

    $('.text').keyup(function(e) { 
        if (ran == 0){
            ran++;
            alert('test');
        }
    });

}); //END document.ready

Working jsFiddle

---

但是，如果 HTML 是通过 javascript 或 AJAX(通过 .load())或类似方式注入(inject)的，则用户事件将不会触发任何代码运行。

在这种情况下，有一个简单的解决方案:使用 jQuery 的 .on() 方法。

var ran=0;
$(document).ready(function() {

    $(document).on('keyup', '.text', function(e) { 
        if (ran == 0){
            ran++;
            alert('test');
        }
    });

}); //END document.ready

上面的小改动:

$(document).on('keyup', '.text', function(e) { 

将事件处理程序绑定(bind)到文档本身，并告诉它监视任何涉及 .text 类元素的 keyup 事件。

Modified jsFiddle

其中一个应该可以正常工作。

---

请注意，为您构造的示例包含一个 CHECK，因此 keyup 操作不会执行多次。您可以删除它并让代码对每次按键执行某些操作:

$(document).ready(function() {

    $('.text').keyup(function(e) { 
        alert('test');
    });

}); //END document.ready