sposób wywoływania zdarzenia po zmianie tekstu etykiety

Question

Próbuję uruchomić funkcję po zmianie tekstu etykiety. To jest mój kod

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

#frameItemCode jest mój label id, ale zdarzenie nie jest wypalania. Próbowałem przykłady podane wcześniej, ale nie pomogło me.This jest moim 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

Spójrz na documentation for the change event. On jedynie pożary dla poszczególnych rodzajów elementów:

Impreza zmiana jest zwolniony za <input>, <select> i <textarea> elementów, gdy zmiana wartości tego elementu jest popełnianych przez użytkownika ...

You nie będzie mógł użyć zdarzenia change dla elementu, który nie jest jednym z wcześniej wymienionych typów.

Jeśli masz inny sposób na stwierdzenie, że edycja zakończyła się określonym elementem, będziesz musiał wystrzelić własne wydarzenie - prawdopodobnie używając blur event elementu, którego użyto do zmiany wartości. Zdarzenie blur jest wyzwalane, gdy wybrany element traci ostrość, na przykład gdy użytkownik kliknie (lub wypuści) element wejściowy.

Answer 2

Możesz pobrać aktualny tekst etykiety i sprawdzić, czy wartość jest inna przy klawiaturze lub po naciśnięciu przycisku. Zdarzenie change nie działa dla elementów innych niż formalne.

Answer 3

Jeśli użyjesz, $("#frameItemCode").text('abc'), aby zmienić etykietę (zgodnie z komentarzem), po prostu zadzwoń po alert("changed"). Nie ma potrzeby, aby zdefiniować detektor zdarzeń ..

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

---

Jeśli zmiany etykiet na kilka sposobów definiowania TimeInterval, by sprawdzić, czy etykieta nie zmieniło,

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 4

nie sądzę etykieta ma związane z nim zdarzenie change(), jeśli chcesz ją osiągnąć, można to zrobić za pomocą JQuery lub JS. Ponieważ dynamiczne zmienianie tekstu etykiety odbywa się za pomocą Jquery lub JS.

Zamiast tego można utworzyć funkcję i wywołać ją, gdy etykieta jest zmieniana z funkcji, w której ma miejsce zmiana etykiety.

Answer 5

Na etykiecie .change() nie będzie działać, więc można spróbować coś takiego za pomocą trigger() który nazywamy naszą niestandardowe zdarzenie, tutaj fnLabelChanged jest mój zwyczaj wydarzenie

.change() wydarzenie pracował <input>, <textarea>, <select> .ja.e

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


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

Working Demo

Answer 6

zależności od przeglądarki trzeba wspierać, można użyć MutationObserver:

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

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

Przykład jsFiddle