Javascript 如何在标签文本更改时触发事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27635600/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to fire event on label text change
提问by Saranga
I'm trying to fire a function when the label text changes. This is my code
我试图在标签文本更改时触发一个函数。这是我的代码
$("#frameItemCode").change(function (e) {
alert("Changed");
});
#frameItemCodeis my label id, but the event isn't firing. I have tried examples given before but they hasn't helped me.This is my html
#frameItemCode是我的标签 ID，但事件并未触发。我已经尝试过之前给出的例子，但它们没有帮助我。这是我的 html
<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>
回答by Lix
Take a look at the documentation for the changeevent. It only fires for specific types of elements:
The change event is fired for
<input>,<select>, and<textarea>elements when a change to the element's value is committed by the user...
当用户提交对元素值的更改时，将针对
<input>、<select>和<textarea>元素触发 change 事件...
You won't be able to use the changeevent for an element that is not one of the previously mentioned types.
您将无法change对不是上述类型之一的元素使用该事件。
If you have some other way of knowing that editing has finished of a specific element, you'll have to fire your own event - possibly using the blureventon the element that was used to change the value. The blurevent is triggered when the selected element looses focus such as when a user clicks (or tabs) out of an input element.
如果您有其他方式知道编辑已完成特定元素，则必须触发自己的事件 - 可能使用用于更改值的元素上的blur事件。blur当所选元素失去焦点时触发该事件，例如当用户单击（或选项卡）离开输入元素时。
回答by Satinder singh
For label .change()will not work, So you can try something like this by using trigger()which call our custom event, here fnLabelChangedis my custom event
因为标签.change()不起作用，所以你可以通过使用trigger()调用我们的自定义事件来尝试这样的事情，这 fnLabelChanged是我的自定义事件
.change()event worked for <input>, <textarea>,<select>.i.e
.change()事件适用于<input>, <textarea>, <select>.ie
$("button").on('click',function(){
$("#frameGroupCode").text("Hello").trigger("fnLabelChanged");
});
$("#frameGroupCode").on('fnLabelChanged', function(){
console.log('changed');
})
回答by Catalin Lungu
You can get the current text of the label and check if the value is different on keyup or when pressing a button. The changeevent doesn't work for non form elements.
您可以获取标签的当前文本并检查键上或按下按钮时的值是否不同。该change事件不适用于非表单元素。
回答by Sampath Liyanage
If you use, $("#frameItemCode").text('abc')to change the lable (as you commented), just call the alert("changed")after that. No need to define an event listener..
如果您使用，$("#frameItemCode").text('abc')要更改标签（如您所评论的那样），只需在此alert("changed")之后调用。无需定义事件侦听器..
$("#frameItemCode").text('abc');
alert("changed");
If the label changes in several ways, define a timeInterval to check if the label has changed,
如果标签有几种变化，定义一个timeInterval来检查标签是否发生了变化，
function inspectLabel(callback){
var label = $("#frameItemCode").text();
setInterval(function(){
var newlabel = $("#frameItemCode").text();
if (newlabel != label){
callback();
label = newlabel;
}
}, 100);
}
inspectLabel(function(){
alert('changed');
});
回答by Sunil Goli
I don't think label has change() event associated with it, if you want to achive it, then it can be done through JQuery or JS. Because changing label text dynamically is done through Jquery or JS.
我不认为 label 有与之关联的 change() 事件，如果你想实现它，那么它可以通过 JQuery 或 JS 来完成。因为动态更改标签文本是通过 Jquery 或 JS 完成的。
Instead, you can create a function and call it when the label is being changed from your function where the lable text change takes place.
相反，您可以创建一个函数并在发生标签文本更改的函数更改标签时调用它。
回答by Phylogenesis
Depending on which browsers you need to support, you can use MutationObserver:
根据您需要支持的浏览器，您可以使用MutationObserver：
var observer = new MutationObserver(
function (mutations) {
alert('Label was changed!');
}
);
observer.observe(document.querySelector('#frameGroupCode'), { childList: true });
Example jsFiddle
示例jsFiddle
