How can I attach a handler to an innerHTML change inside a ?

Question

How can I detect a change inside an <span> element I need to attach a handler to it but can't succeed.

Here is my html:

<span class="pad-truck-number-position"><?php echo $_SESSION['truckId']; ?></span>

And this is my javascript/jQuery:

<script type="text/javascript">
    var changedText = $('.pad-truck-number-position').text();
    alert(changedText);
    $(changedText).on('change',function() {
        alert("changed");   
    });
</script>

alert(changedText) does work fine. But when the text inside the span changes it doesn't alert alert("changed");

This is how I change the element:

          truckTable.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
        var nTds = $('td', this);
            var index = $(nTds[0]).text();
            $.ajax({
                type: "POST",
                url : "content/right-up/trucks.php/",
                data: { truckid : index },
                headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}
            }).done(function(response){
                $('.pad-truck-number').text(index);
                $('.pad-truck-number-position').text(index);
                $('#mapContent').load("content/left-up.php");
                $('#right-down-tab-truck').tabs('load', 0);
                $('#right-down-tab').hide();
            $('#right-down-tab-truck').show();
            });

How can you change text inside span. jsFiddle will help more. — Sadikhasan, Oct 03 '14 at 08:14
`"This event is limited to elements, boxes and <select> elements."` http://api.jquery.com/change/</select> — loveNoHate, Oct 03 '14 at 08:16

Think Different · Answer 1 · 2014-10-03T08:23:26.950

2

You can try:

To execute it once:

  jQuery('.pad-truck-number-position').one("DOMSubtreeModified",function(){   
         //Notice the .one not .on
         //Your code
 });

Or multiple times:

 jQuery('.pad-truck-number-position').on("DOMSubtreeModified",function(){   

         //Your code
 });

edited Oct 03 '14 at 08:23

answered Oct 03 '14 at 08:18

Think Different

2,815
1
12
18

I need to handler to execute more than once. – Daan Oct 03 '14 at 08:20

score 1 · Answer 2 · edited May 23 '17 at 10:33

1

You could bind DOMSubtreeModified to check if the text inside is modified:

<script type="text/javascript">
var changedText = $('.pad-truck-number-position').text();
alert(changedText);
$('.pad-truck-number-position').bind('DOMSubtreeModified', function(event) {
    alert('changed');
});
</script>

Or using mutation observers:

<script type="text/javascript">
var changedText = $('.pad-truck-number-position').text();
var element = $('.pad-truck-number-position')[0];
// var original_text = element.text();

var observer = new MutationObserver(function( mutations ) {
    mutations.forEach(function( mutation ) {
        var newNodes = mutation.addedNodes;
        if( newNodes !== null ) {
            alert('changed');
        }
    });
});

var config = { attributes: true, childList: true, characterData: true };
observer.observe(element, config);
</script>

Here is a good find:

edited May 23 '17 at 10:33

Community

1
1

answered Oct 03 '14 at 08:16

Kevin

41,694
12
53
70

@DOCASAREL you bind `DOMSubtreeModified` on that particular element – Kevin Oct 03 '14 at 08:23
I think `DOMSubtreeModified` is deprecated. I read it here http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified – blitzen12 Oct 03 '14 at 08:24
jQuery bind or JS bind? – loveNoHate Oct 03 '14 at 08:27
Except that it is a mystery for me, how that discernment ever worked jq bind is deprecated since 1.7. – loveNoHate Oct 03 '14 at 09:22

How can I attach a handler to an innerHTML change inside a ?

2 Answers2