web-dev-qa-db-ja.com

変更されたスパンテキスト/ htmlのトリガー

spanタグのtext/htmlが変更されたときにトリガーされるjQueryまたはJavaScriptのイベントはありますか？

コード：

<span class="user-location"> </span>

$('.user-location').change(function () {
    //Not working
});

前もって感謝します！

javascriptjqueryhtmljavascript-events
10
Govind Samrow

DOMSubtreeModifiedを使用して、span要素の変更を追跡できます（つまり、span要素のテキストが動的に変更された場合）。

$('.user-location').on('DOMSubtreeModified',function(){
  alert('changed')
})

followinfリンクを確認してください https://jsbin.com/volilewiwi/edit?html,js,output

20
Mohit Arora

短い答えはjQuerychange- Event[〜＃〜] no [〜＃ 〜]、

このイベントは、input要素、textareaボックス、およびselect要素。選択ボックス、チェックボックス、ラジオボタンの場合、ユーザーがマウスで選択するとすぐにイベントが発生しますが、他の要素タイプの場合、要素がフォーカスを失うまでイベントは延期されます。 ...ここにドキュメントへのリンクがあります https://api.jquery.com/change/

しかし、MutationsObserverのようなものはこちらMDNリファレンスへのリンク https://developer.mozilla.org/ en-US/docs/Web/API/MutationObserver 、DOMの変更を監視できます。特定のケースでは、問題のspan。

ここに簡単な例（MDNリファレンスから適応）
この例では、spanの変更が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>

jQueryでこれを行うことができます：
この例では、2番目のspanを追加して、動作の仕組みを示しました

// 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>
4
winner_joiner

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);
2
PPB

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>
1
Ehsan

ミューテーション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();
0
Matheus Toniolli

そのためにjavascriptを使用できます。

<html>
  <body>
    <span class="user-location" onchange="myFunction()">
       <input type="text"> 
    </span>
    <script>
       function myFunction() {
          alert("work");
       }
    </script>
 </body>
  </html>

それが役立つことを願っています。

0
Pirate