How to fire an event when changing label text

Question

I am trying to run a function when changing label text. This is my code.

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

#frameItemCode is my label id, but the event does not fire. I tried the examples given earlier, but they did not help me. This is my 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

Take a look at the documentation for the change event . It runs only for certain types of elements:

The change event is fired for the <input> , <select> and <textarea> elements when the user changes the value of the element ...

You cannot use the change event for an element that is not one of the previously mentioned types.

If you have another way to find out that editing ended with a specific element, you will need to fire your own event - perhaps using the blur event on the element that was used to change the value. The blur event is fired when the selected item loses focus, for example, when the user clicks (or tabs) from an input item.

Answer 2

For shortcut .change() will not work. So you can try something like this using trigger() which trigger our custom event, here fnLabelChanged is my custom event

.change() event worked for <input> , <textarea> , <select> .ie

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

Working demo

Answer 3

You can get the current label text and check if the value is different when the key is pressed or when the button is pressed. The change event does not work for elements without a form.

Answer 4

If you use $("#frameItemCode").text('abc') to change the lable (as you commented), just call alert("changed") after that. There is no need to define an event listener.

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

---

If the label changes in several ways, define timeInterval to check if the label has 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'); }); 

Answer 5

I don’t think the label has a change () event associated with it, if you want to achieve it then it can be done via JQuery or JS. Since dynamic change of label text is done through jQuery or JS.

Instead, you can create a function and call it when the label is changed from your function, where the text is changed using the layout.

Answer 6

Depending on which browsers you need to support, you can use MutationObserver :

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

JsFiddle example