2
spanタグtext/htmlが変更されたときにトリガーされるイベントはありますか？スパンテキスト/ HTMLのトリガーが変更されました
コード：事前に
<span class="user-location"> </span>
$('.user-location').change(function() {
//Not working
});
ありがとう！
A
答えて
10
あなたのspan要素に変更を追跡するためにDOMSubtreeModifiedを使用することができますすなわち、 （スパン要素のテキストが動的に変化する場合）。
$('.user-location').on('DOMSubtreeModified',function(){
alert('changed')
})
チェックアウトfollowinfリンクをhttps://jsbin.com/volilewiwi/edit?html,js,output
+0
ありがとう、その作業 –
+1
MutationEventsは廃止予定です：https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events、代わりにMutationObserverを使用してくださいhttps://developer.mozilla.org/ ja-JP/docs/Web/API/MutationObserver – holographix
+0
あなたは天才です –
3
短い答えは
このイベントは要素を選択入力要素、TEXTAREAボックスと に制限され、NO - イベントjQueryの
changeするためのものです。選択ボックス、チェックボックス、およびラジオボタンの場合、 ユーザーが を選択するとすぐにイベントが発生しますが、その他の要素タイプの場合は、イベントが遅れて の要素がフォーカスを失うまで延期されます。 ... はここにここにMutationsObserverMDNリファレンスhttps://developer.mozilla.org/en-US/docs/Web/API/MutationObserverへのリンクのようなものを持つドキュメントhttps://api.jquery.com/change/
しかしへのリンクである、あなたは、DOMの変化を見ることができます。特定のケースではspanが問題になります。ここで
（MDNリファレンスから適応）簡単な例
例でspan変更は、あなたはjQueryのとsetTimeout
// select the target node
var target = document.getElementById('user-location');
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.info("EVENT TRIGGERT " + mutation.target.id);
});
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);
// simulate the Change of the text value of span
function simulateChange(){
target.innerText = "CHANGE";
}
setTimeout(simulateChange, 2000);<span id="user-location"></span>でできたシミュレートされましたこれを行う：
この例では私はちょうどそれはあなたがそのためにjavascriptを使用することができます
// Bind to the DOMSubtreeModified Event
$('.user-location').bind('DOMSubtreeModified', function(e) {
console.info("EVENT TRIGGERT " + e.target.id);
});
// simulating the Change of the text value of span
function simulateChange(){
$('.user-location').each(function(idx, element){
element.innerText = "CHANGED " + idx;
});
}
setTimeout(simulateChange, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="firstSpan" class="user-location">Unchanged 0</span><br/>
<span id="secondSpan" class="user-location">Unchanged 1</span>
0
の仕事ができる方法を示すために、第2 spanを追加しました。
<html>
<body>
<span class="user-location" onchange="myFunction()">
<input type="text">
</span>
<script>
function myFunction() {
alert("work");
}
</script>
</body>
</html>それに役立つことを願っています。このよう
：
+0
残念ながら、onchangeアラートが各onchangeテキストの挿入で発生するようには見えません。それは、ボックスをクリックしてフォーカスを別の要素に変更すると警告するだけです。 onchangeは実際には別のstackoverflowスレッドのスパンでは機能しません。私はそれを動作させる方法を知りたいですが。 –
0
あなたはinputイベントを使用することができます
$(document).ready(function(){
$(".user-location").on("input",function(){
console.log("You change Span tag");
})
})
例：
<!DOCTYPE html>
<html>
<head>
<style>
span {
border: 1px solid #000;
width: 200px;
height: 20px;
position: absolute;
}
</style>
</head>
<body>
<span class="user-location" contenteditable="true"> </span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".user-location").on("input",function(){
console.log("You change Span tag");
})
})
</script>
</body>
</html>
2
あなたは "変更" とは何を意味するのですか？JavascriptをMutationObserver
//More Details https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
// select the target node
var target = document.querySelector('.user-location')
// create an observer instance
var observer = new MutationObserver(function(mutations) {
console.log($('.user-location').text());
});
// configuration of the observer:
var config = { childList: true};
// pass in the target node, as well as the observer options
observer.observe(target, config);
0
使用突然変異API MutationObserver
// Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');
// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true };
// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
console.log('A child node has been added or removed.');
}
else if (mutation.type == 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
}
}
};
// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
// Later, you can stop observing
observer.disconnect();
関連する問題
- 1. スパンテキストを変更しますか？
- 2. 変数が変更された場合のイベントのトリガー
- 3. ajaxでインポートされた変更トリガーID
- 4. クラスのスパンテキストを変更する
- 5. 私のHTMLコードが変更されました
- 6. ファイルの名前が変更されたときのフォルダアクションのトリガー
- 7. jsでスパンテキストを変更する
- 8. routeNameが変更された場合のリアクションナビゲーションのトリガー
- 9. JSがaspxからhtmlに変更されました
- 10. 選択したDropDownListプロパティがhtmlで変更されますか？
- 11. テーブルが変更されたときのSQL Serverトリガー
- 12. jsonデータが変更されたときのトリガーng-show
- 13. コンフルエンスページが変更されたときのURLをトリガーする
- 14. summernote - サイズを変更せずにHTMLで表示された画像のサイズが変更されました
- 15. AngularJS - トリガー変数がスコープ内で変更されたとき、私のエラーメッセージは更新されませんか？
- 16. PropertyChangedがトリガーされましたが、ビューは更新されません
- 17. TFS2015：変更のためにトリガーされたゲートチェックインビルドがありません
- 18. 更新データが変更された場合のみ更新をトリガーする
- 19. document.cookieが変更されたときにアクションをトリガーしますか？
- 20. HTMLフォームの入力が変更されましたが、元の値に戻されました
- 21. 値のバインディングを変更するとAngularJSがトリガーされます。
- 22. ファイルが変更されたときにトリガーするクラス
- 23. VSTSトリガー外部レポが変更されたときに構築
- 24. スコープの値が変更されたときのhtmlの変更の遅れ
- 25. URLが変更されましたが、ビューが変更されません。
- 26. 値が更新される前にng-changeがトリガーされました
- 27. カラムが変更された場合にのみSQLの更新トリガー
- 28. 変数の変更によりイベントがトリガーされる
- 29. gulp.watchファイルが追加または削除されたが変更されていない場合のみトリガー
- 30. ネストされたdiv内のスパンテキストのためのSelenium CSS Locator
を使用してinnerHtmlが変更されたら？ –
'span'は入力要素ではないので、変更するまで何も変更されません！ S –
スパンテキストが変更されたときにただイベントしたいですか？ –