jQuery changing text of an element if another element has a certain class

Question

I am trying to change the text value of an element if another element has a class but what I am currently doing is showing no results.

$(document).ready(function () {
    $('#number').text('00');

    setTimeout(function () {
        $('#test').removeClass('initial-number').addClass('change-number');
    }, 500);
});

$(document).change(function () {
    if ($('#test').hasClass('change-number') === true) {
        $('#number').text('10');
    };
});

#test {
  height: 2em;
  width: 2em;
}

.initial-number {
  background: blue;
}

.change-number {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="number"></span>
<div class="initial-number" id="test"></div>

possible duplicate of [JQuery does not execute on $(document).change()](http://stackoverflow.com/questions/12495128/jquery-does-not-execute-on-document-change) — renakre, May 12 '15 at 12:58

score 4 · Answer 1 · answered May 12 '15 at 12:55

document has no change event; that's only for form field elements.

You can use mutation observers for this, watching for changes to the attributes of the element in question. They're well-supported on modern browsers; on slightly less-modern browsers, you can find a polyfill using the old mutation events. On really older browsers, you'll have to poll.

score 3 · Accepted Answer · answered May 12 '15 at 13:08

Try this

   $(document).ready(function () {
$('#number').text('00');

setTimeout(function(){
  $('#test').removeClass('initial-number').addClass('change-number');
   $('#number').text('10');
  }, 500);
});

#test {
  height: 2em;
  width: 2em;
}

.initial-number {
  background: blue;
}

.change-number {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="number"></span>
<div class="initial-number" id="test"></div>

"Try this" answers are **not useful**. Say **what** you did, and **why**. — T.J. Crowder, May 12 '15 at 13:14

score 1 · Answer 3 · answered May 12 '15 at 12:58

Why not simply include it in the setTimeout function:

$(document).ready(function () {
    $('#number').text('00');

    setTimeout(function () {
        $('#test').removeClass('initial-number').addClass('change-number');
        if ($('#test').hasClass('change-number')) {
            $('#number').text('10');
        };
    }, 500);
});

score 0 · Answer 4 · answered May 12 '15 at 12:55

0

try this

 $(document).bind('DOMSubtreeModified', function () {
       if ($('#test').hasClass('change-number') === true) {
        $('#number').text('10');
      };
    });

Change is only for input, textarea or select elements.

answered May 12 '15 at 12:55

Gurgen Sargsyan

1,087
15
22

Mutation events were deprecated years ago, and are actively being removed from modern browsers. – T.J. Crowder May 12 '15 at 12:56

jQuery changing text of an element if another element has a certain class

4 Answers4