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

【问题标题】：jQuery change event not firing on input elementjQuery更改事件未在输入元素上触发
【发布时间】：2023-03-13 05:46:01
【问题描述】：

首先，我检查了与我的问题相似的每个主题，不幸的是，我还没有找到我的答案。我试图结合一些答案，但我没有成功。（注：刚开始学习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 图标需要更改为与输入文本相同的颜色，但仅在输入内容时。删除后，它应该变回占位符文本的颜色。

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

【问题讨论】：

你的第二个代码没有问题。经过测试。
我建议使用.on api.jquery.com/on

标签： jquery html css svg

【解决方案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) {

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

Modified jsFiddle

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

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

$(document).ready(function() {

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

}); //END document.ready

【讨论】：

谢谢！这行得通。有了这些信息，我想删除它的当前类并添加一个新类，类似于输入的文本。如果我从输入字段中移除焦点，svg 会保留课程吗？

【解决方案2】：

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

起作用的是使用 .attr() 方法添加新的或旧的（默认）类。代码如下：

$(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");
      }
 });
});

感谢您帮助我开始！

【讨论】：