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()）或类似的方式注入的，则用户事件将不会触发运行.

的任何代码

在那种情况下，有一个简单的解决方案：使用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) {

将事件处理程序绑定到文档本身，并告诉它监视任何涉及 class .text.

元素的 keyup 事件

Modified jsFiddle

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

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

$(document).ready(function() {

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

}); //END document.ready

Answer 2

我找到了解决问题的方法！我发现 jQuery 无法处理常规的 'classes' 和“id”。所以方法 .addClass() 和 .removeClass() 将不起作用。

有效的方法是使用 .attr() 方法添加新的或旧的（默认）class。这是代码：

$(function(){
  $('.text').keyup(function(){
      if ($(this).val() == '') { //Check to see if there is any text entered
           //If there is no text within the input then add class 'unfilled'
            $("#svg_user").attr("class", "unfilled");
      } else {
           //If there is text in the input, then change the class from 'unfilled' to 'filled'
            $("#svg_user").attr("class", "unfilled filled");
      }
 });
});

感谢大家帮助我入门！

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

jQuery change event not firing on input element

html

css

jquery

svg