У меня есть div <div id="Country">India</div>. Я хочу выполнить некоторый код (например, функцию JavaScript) всякий раз, когда изменяется значение div. Как я могу слушать изменения в значении div? Нужно ли использовать JQuery для этого?Выполнение функции javascript при изменении значения div
Вы можете прослушивать события, вызванные с помощью MutationObserver DOM API: https://developer.mozilla.org/en/docs/Web/API/MutationObserver
Несомненно .. к сожалению, посмотрите на диаграмму «Совместимость». – user2864740
Попробуйте это демо, это в ссылке Cracker0dks в http://jsbin.com/ayiku и это код http://jsbin.com/ayiku/1/edit
простое решение JQuery является использование пользовательских событие и вызвать его самостоятельно при изменении DOM:
$("#country").html('Germany').trigger('CountryChanged');
$('#country').on('CountryChanged', function(event, data) {
//contentchanged
});
+ 1 Как бы я попытался подключиться к источнику, а не реагировать на изменения DOM. Наблюдатели DOM (старый и новый стиль) недостаточно хорошо поддерживаются, хотя существуют различные плагины [jQuery], чтобы попытаться использовать поддержку/совместимость. – user2864740
Я подготовил для вас небольшую демонстрационную версию. Это немного грубо, но я уверен, что вы можете его улучшить;).
Счастливого Coding :)
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("#ChangeText").click(function(){
var value = $("#DivText").val();
$("#Country").text(value);
});
$('#Country').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
if (event.type == 'DOMNodeInserted') {
alert('Content added! Current content:' + '\n\n' + this.innerHTML);
} else {
alert('Content removed! Current content:' + '\n\n' + this.innerHTML);
}
});
});
</script>
</head>
<body >
<input type="text" id="DivText" />
<button id="ChangeText"> Change Div Text </button> <br /> <br />
<div id="Country">India</div>
</body>
</html>
Попробуйте это в тег сценария:
$(document).ready(function(){
var new_country1 = "";
var new_country2 = "";
var func_flag = 0;
$('#Country').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
if (event.type == 'DOMNodeInserted') {
new_country1 = this.innerHTML;
if(new_country1 != new_country2 && func_flag == 1) {
country_changed_function();
}
} else {
new_country2 = this.innerHTML;
}
func_flag = 1;
});
});
function country_changed_function(){
alert('country changed.');
}
Здесь "country_changed_function" является функция запуска по стране Дива innerHTML переоделся.
Для этого вам нужен javascript (jQuery, если хотите). – kmas
div значение меняется касается внутреннийHTML. –
«Лучшим» нынешним способом справиться с этим было бы, вероятно, в том, чтобы * использовать любые изменения содержимого div * и слушать этот источник. – user2864740