jQuery onChange() does not work…

Question

so I tried making a simple on change fiddle. I can't get it to work. No matter what I do. WHY?

HTML CODE

<div id="status" style="display:none">0</div>
<button class="start">GO</button>

Javascript CODE

var cntTo = 2;
var cnt = 0;

$('#status').change( function() {
  console.log('status changed');
  if ($(this).text() == '1'){
    if(cnt <= cntTo){
      getNext(cnt);
    }
  }
});



$('.start').click(function(){
  console.log('start clicked');
  console.log('text of status now: ' + $('#status').text());
  if($('#status').text() != '1'){
    console.log('setting text');
    $('#status').text('1');
    console.log('text of status now: ' +$('#status').text());
  }
});

function getNext(cnt){
  $('#status').text('0');
  console.log('getting details');
}

https://jsfiddle.net/hakz47vg/

but I have also tried. $(document).on('change','#divid', function () { // and this doesn't work either. }) — GrafixMastaMD, Sep 27 '17 at 05:23

score 1 · Answer 1 · answered Sep 27 '17 at 05:24

1

The .change() function is limited to input, textarea, and select. Source: https://api.jquery.com/change/

answered Sep 27 '17 at 05:24

SvEnjoyPro

764
1
9
12

score 0 · Answer 2 · answered Sep 27 '17 at 05:24

0

You can embed onchange function code directly with GO button click event like this:

$('.start').click(function(){
    if($('#status').text() != '1'){
        $('#status').text('1');
    }
else
{
  if(cnt <= cntTo){
    getNext(cnt);
  }
}
});

answered Sep 27 '17 at 05:24

Himanshu Upadhyay

6,558
1
20
33

Himanshu. I could do this but I can't do this. Because I will be using ajax to make calls. Then the ajax success function updates the hidden field to be 1 again. If you notice the getNext function updates it to be 0. so that way when ajax returns it's value it will fire off the next record and I can visually see each record being processed. – GrafixMastaMD Sep 27 '17 at 05:31
ok @GrafixMastaMD, you can use `DOMSubtreeModified` as others suggested. – Himanshu Upadhyay Sep 27 '17 at 05:35

Znaneswar · Answer 3 · 2017-09-27T05:43:27.923

Use DOMSubtreeModified event

DOMSubtreeModified This is a general event for notification of all changes to the document. It can be used instead of the more specific mutation and mutation name events. Reference

$('#status').bind("DOMSubtreeModified",function(){
  alert('changed');
});

Working fiddle

another simple solution

when text in #text changes in script fires a trigger and you can bind it to change event

 var cntTo = 2;
 var cnt = 0;
   $('#status').bind('change', function () {
      console.log('fired');
   if ($(this).text() == '1'){
    if(cnt <= cntTo){
     getNext(cnt);
    }
   }
    });
 
 $('.start').click(function(){
  if($('#status').text() != '1'){
   $('#status').text('1');
             $('#status').trigger('change');
  }
 });
 
 function getNext(cnt){
  $('#status').text('0');
  console.log('getting details');
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="status" style="display:none">0</div>
<button class="start">GO</button>

Thank you. This is closest I have got. It's a little tricky to work with. But I think with some if statements I can definitely accomplish my goal. Thank you very much for this. — GrafixMastaMD, Sep 27 '17 at 05:34
You welcome :) i have added another simple solution similar to what you have done check that once updated my answer — Znaneswar, Sep 27 '17 at 05:43

score 0 · Accepted Answer · answered Sep 27 '17 at 05:25

Use this

$('#status').bind("DOMSubtreeModified",function(){

 
  var cntTo = 2;
 var cnt = 0;
 $(document).ready(function() {
   $('.start').click(function() {
     if ($('#status').text() != '1') {
       $('#status').text('1');
     }
   });
   $('#status').bind("DOMSubtreeModified",function(){
     console.log('fired');
     if ($(this).text() == '1') {
       if (cnt <= cntTo) {
         getNext(cnt);
       }
     }
   });
 });


 function getNext(cnt) {
   $('#status').text('0');
   console.log('getting details');
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="status" style="">0</div>
<button class="start">GO</button>

Thank you for your help. I have marked yours instead as it as before the other person's. I didn't see it first. But I have changed my choice. — GrafixMastaMD, Sep 27 '17 at 05:36

score 0 · Answer 5 · edited Oct 07 '17 at 04:48

0

$("start").click function put inside in ready Function

edited Oct 07 '17 at 04:48

kyun

9,710
9
31
66

answered Sep 27 '17 at 05:28

Ashish Gupta

1

score 0 · Answer 6 · answered Sep 27 '17 at 05:33

You are using change event which does not watch or respond to div content.Use DOMSubtreeModified event and trigger action on that event.

var cntTo = 2;
var cnt = 0;

$('#status').on("DOMSubtreeModified", function() {
  if ($(this).text() == '1') {
    if (cnt <= cntTo) {
      getNext(cnt);
    }
  }
});
$('.start').click(function() {
  if ($('#status').text() != '1') {
    console.log('setting text');
    $('#status').text('1');
    console.log('text of status now: ' + $('#status').text());
  }
});

function getNext(cnt) {
  $('#status').text('0');
  console.log('getting details');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="status" style="display:none">0</div>
<button class="start">GO</button>

score 0 · Answer 7 · answered Sep 27 '17 at 05:34

If you want to do some action when the content modified inside the div element you have to use the event called DOMSubtreeModified like below.

 $("body").on('DOMSubtreeModified', "#status", function() {

UPDATED FIDDLE

Reference:

For more information read out the thread already discussed about this in stack overflow.

jQuery Event : Detect changes to the html/text of a div

jQuery onChange() does not work…

7 Answers7