.on() change function does not fire when updating text using jquery

Question

I'm trying to update text using jquery, and I'm trying to fire some functions with .change() but nothing works.

<div class="btn btn-tag" data-toggle='dropdown'>
  Explore
</div>

When this text changes using jQuery functions (using .text() in jquery) it does not alert:

 $(body).on('change','btn-tag',function() {
   alert('test');
 });

When it changes text, its supposed to alert, but it doesn't why is this?

Answer 1

You can not apply change event to body, div, span etc rather you can apply to input type like text, checkbox etc. You can periodically pool the contents to check the change in the element childs or you can use DOMNodeInserted and DOMNodeRemoved to check if elements are added or removed, for details check this post.

$(body).on('DOMNodeInserted DOMNodeRemoved','.btn-tag', function(event) {
         if (event.type == 'DOMNodeInserted') {
        alert('Content added! Current content:' + '\n\n' + this.innerHTML);
    } else {
        alert('Content removed! Current content:' + '\n\n' + this.innerHTML);
    }
});

Note that DOMNodeInserted and DOMNodeRemoved does not work every where and the DOMNodeInserted event is buggy in Internet Explorer 9, it is not fired when a node is inserted for the first time, reference.

Answer 2

Div can't have change event you can apply click though:

• delegate body in ''
• class selector prefix with .

like this:

$('body').on('click','.btn-tag',function() {
   alert('test');
 });

But if you are trying to update your div with some dropdown values:

try this bin: http://jsbin.com/ulecom/1/edit

$('select').change(function(){
  if($('.btn-tag').text() == $('select').val()){
    alert('test');
  } 
});