更改了span文本/ html的觸發器

當span標記文本/ html已被更改時，是否有任何觸發jQuery或JavaScript的事件？更改了span文本/ html的觸發器

代碼：

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

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

提前感謝！

來源

2016-08-30 Govind Samrow

你是什麼意思與「變」？ innerHtml何時改變？ –

'span'不是輸入元素，所以在改變之前不會有任何改變！ S –

我只想在事件文本被更改時發生事件？ –

可以使用DOMSubtreeModified來跟蹤你的跨度元素進行更改即（如果span元素的文本動態變化）。

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

退房的followinf鏈接https://jsbin.com/volilewiwi/edit?html,js,output

來源

2016-08-30 17:17:59

謝謝，它的工作 –

請注意，因爲MutationEvents不推薦使用：https：//developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events，請使用MutationObserver代替https://developer.mozilla.org/ en-US/docs/Web/API/MutationObserver – holographix

你是一位天才 –

簡短的回答爲jQuery的change - 活動NO，

此事件被限制爲輸入元件，textarea的盒和選擇元件。對於選擇框，複選框和單選按鈕，當用戶使用鼠標選擇時，會立即觸發該事件，但對於其他元素類型，事件將推遲到元素失去焦點。 ... 這裏是文檔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的你可以這樣做：
在這個例子中，我添加了第二個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>

來源

2016-08-30 07:55:42

您可以使用javascript了點。

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

希望這將有助於。

來源

2016-08-30 07:56:30 Pirate

不幸的是，似乎並不是每次onchange文本插入都會發生onchange警報。只有當您單擊此框並將焦點更改爲其他元素時，它纔會發出警報。我讀到onchange實際上不適用於另一個stackoverflow線程上的跨度。雖然我想知道如何使它工作。 –

您可以使用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>

來源

2016-08-30 08:16:20 Ehsan

使用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);

來源

2017-03-15 09:29:18 PPB

使用突變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();

來源

2018-02-17 17:16:58

更改了span文本/ html的觸發器

回答

相關問題