Question

我试图在标签文字发生变化时触发一个功能。这是我的代码

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

#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>

Answer 1

看看documentation for the change event。它仅针对特定类型的元素触发：

当用户提交对元素值的更改时，<input>，<select>和<textarea>元素会触发更改事件...

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

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

Answer 2

对于标签 .change() 不起作用，因此您可以尝试使用 trigger() 来调试我们的自定义事件{ {1}}是我的自定义事件

fnLabelChanged活动适用于.change()，<input>，<textarea> .i.e

<select>

<强> Working Demo

Answer 3

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

Answer 4

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

$("#frameItemCode").text('abc');
alert("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');
});

Answer 5

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

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

Answer 6

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

var observer = new MutationObserver(
    function (mutations) {
        alert('Label was changed!');
    }
);

observer.observe(document.querySelector('#frameGroupCode'), { childList: true });

示例jsFiddle

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

6 个答案: