如何在标签文本更改时触发事件

how to fire event on label text change

本文关键字：事件 标签 文本      更新时间：2023-09-26

我正在尝试在标签文本更改时触发一个函数。这是我的代码

$("#frameItemCode").change(function (e) {
    alert("Changed");
});

#frameItemCode 是我的标签 ID，但事件未触发。我以前尝试过给出的例子，但它们对我没有帮助。这是我的网页

<div class="input-group">
  <span class="input-group-addon" @*style="width: 120px;"*@>Item Group</span>
  <label class="input-group-addon" @*style="width: 120px;"*@ id="frameGroupCode"></label>
  <input class="form-control" type="text" id="frameGroupName" style="">
</div>

查看change事件的文档。它仅针对特定类型的元素触发：

当用户提交对元素值的更改时，将为<input>、<select> 和 <textarea> 元素触发 change 事件。

您将无法将 change 事件用于不是前面提到的类型之一的元素。

如果您有其他方法可以知道特定元素的编辑已完成，则必须触发自己的事件 - 可能使用用于更改值的元素上的blur事件。当所选元素失去焦点时（例如，当用户单击（或按 Tab 键）输入元素时，将触发 blur 事件。

对于标签.change()不起作用，所以你可以通过使用调用我们的自定义事件的trigger()来尝试这样的事情，这里是我的自定义事件fnLabelChanged

.change()活动适用于<input>、<textarea>、<select>

$("button").on('click',function(){
         $("#frameGroupCode").text("Hello").trigger("fnLabelChanged");
    });

    $("#frameGroupCode").on('fnLabelChanged', function(){
        console.log('changed');
    })

工作演示

您可以获取标签的当前文本，并在按键或按下按钮时检查值是否不同。change 事件不适用于非表单元素。

如果您

使用，$("#frameItemCode").text('abc')更改标签（如您所评论的），只需在此之后调用alert("changed")即可。无需定义事件侦听器。

$("#frameItemCode").text('abc');
alert("changed");

如果标签以多种方式更改，请定义一个时间间隔来检查标签是否已更改，

function inspectLabel(callback){
    var label = $("#frameItemCode").text();
    setInterval(function(){
        var newlabel = $("#frameItemCode").text();
        if (newlabel != label){
            callback();
            label = newlabel;
        }
    }, 100);
}
inspectLabel(function(){
    alert('changed');
});

根据您需要支持的浏览器，您可以使用 MutationObserver：

var observer = new MutationObserver(
    function (mutations) {
        alert('Label was changed!');
    }
);
observer.observe(document.querySelector('#frameGroupCode'), { childList: true });

示例 jsFiddle

我不认为标签有与之关联的change（）事件，如果你想实现它，那么它可以通过JQuery或JS来完成。因为动态更改标签文本是通过 Jquery 或 JS 完成的。

相反，您可以创建一个函数，并在标签从发生标签文本更改的函数更改时调用它。

相关文章：