it-swarm.com.ru

Триггер для диапазона текста/HTML на изменен

Есть ли какое-либо событие в jQuery или JavaScript, которое сработало, когда был изменен тег span text/html?

Код: 

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

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

Заранее спасибо!

9
Govind Samrow

вы можете использовать DOMSubtreeModified для отслеживания изменений вашего элемента span, т.е. если текст вашего элемента span изменяется динамически.

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

проверьте следующую ссылку https://jsbin.com/volilewiwi/edit?html,js,output

18
Mohit Arora

Краткий ответ для jQuerychange- Событие NO,

Это событие ограничено элементами input, полями textarea и выберите элементы. Для полей выбора, флажков и переключателей событие вызывается немедленно, когда пользователь делает выбор с помощью мыши, но для других типов элементов событие откладывается до элемент теряет фокус. ... здесь ссылка на документацию https://api.jquery.com/change/

Но с чем-то вроде MutationsObserver здесь ссылки на MDN Reference https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver , вы можете наблюдать за изменениями в DOM. В вашем конкретном случае span в вопросе.

Вот краткий пример (адаптировано из MDN Reference)
В примере изменение 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 вы можете сделать это:
в этом примере я добавил второе 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

Использовать Mutation 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