динамически обнаруживать изменение элемента span

Question

У меня есть элементы диапазона, которые динамически генерируются из ответа ajax. Я пытаюсь обнаружить изменение значения span с помощью приведенного ниже кода и, похоже, работает в jsfiddle с фиксированными элементами, но не в реальном сценарии, где данные динамически генерируются. Значения span обновляются с помощью приращения числа setInterval, которое я пытаюсь обнаружить.

Шаги, которые я принимаю, были бы признательны за некоторые советы о том, почему мой код не будет работать?

1. Для всех элементов с идентификатором, содержащим «минут» < - это будут мои пролетных элементы
2. Получить 2
3. Когда изменение обнаружено идентификаторами
4. Обнаружение каких-либо изменений во всех элементах с идентификаторами от стадии , получить значение элемента диапазона
5. Проверьте значение диапазона больше, чем 00 т 01 (это на самом деле значение минуты)
6. Если условие с шагом 5 выполняются затем применить CSS
7. Если условие с шага 5 не выполняется затем удалить CSS

$('[id*="minutes"]').each(function() { 
    spanid = $(this).attr('id'); 

    console.log(spanid); 

    $("#"+spanid).on('change',function(){ 

     spanval = $(this).text(); 
     id = $(this).attr('id').charAt(0); 

     if(spanval > 00) { 
      $('#results').text(span); 

      $("#"+id+"-wt-html").css({"background":"#FFE95B", "color":"red"}); 
     } else { 
      $("#"+id+"-wt-html").removeAttr("style") 
     } 
    }); 
}); 

образец HTML

<td id="9-wt-html"> 
<div id="9-wt-ajax"> 
<span id="9-hours">00</span>: 
<span id="9-minutes">15</span>: 
<span id="9-seconds">12</span> 
</div> 
</td> 

вышеупомянутые элементы пролетных созданы перед вызовом Ajax с использованием фиксированного сценария ниже :

for (var key in skills_arr) { 
//console.log(skills_arr[key]+" - "+key); 
$('#Table > tbody:last-child').append('<tr><td>'+skills_arr[key]+'</td><td id="'+key+'-cw-html"><div id="'+key+'-cw-ajax"></div></td><td id="'+key+'-aa-html"><div id="'+key+'-aa-ajax"></div></td><td id="'+key+'-wt-html"><div id="'+key+'-wt-ajax"><span id="'+key+'-hours">00</span>:<span id="'+key+'-minutes">00</span>:<span id="'+key+'-seconds">00</span></div></td><td id="'+key+'-op-html"><div id="'+key+'-op-ajax"></div></td></tr>'); 
} 

Answer 1

Хорошо, Я создал snippet ниже, основываясь на моем понимании.

Также хотел бы выделить следующие пункты.

Для элемента span мы не можем слушать событие change. Вместо этого код ниже прослушивает событие DOMSubtreeModified.

Кроме того, мы можем непосредственно прослушать событие элемента, используя $('[id*="minutes"]').on('DOMSubtreeModified', function(){}), если элемент существует до этой строки.

В противном случае, мы должны выслушать то же самое из его parent или document , как показано ниже.

$('#Table').on('DOMSubtreeModified', '[id*="minutes"]', function() { 
 
    var span = $(this); 
 
    var spanValue = parseInt(span.text()); 
 
    var id = span.attr('id').charAt(0); 
 
    if(spanValue > 0) { 
 
      //$('#results').text(span); // Not sure what is this? 
 

 
      $("#"+id+"-wt-html").css({"background":"#FFE95B", "color":"red"}); 
 
    } else { 
 
      $("#"+id+"-wt-html").removeAttr("style") 
 
    } 
 
}); 
 

 
var skills_arr = { 
 
    '9': 'some value here' 
 
}; 
 

 
for (var key in skills_arr) { 
 
$('#Table > tbody:last-child').append('<tr><td>'+skills_arr[key]+'</td><td id="'+key+'-cw-html"><div id="'+key+'-cw-ajax"></div></td><td id="'+key+'-aa-html"><div id="'+key+'-aa-ajax"></div></td><td id="'+key+'-wt-html"><div id="'+key+'-wt-ajax"><span id="'+key+'-hours">00</span>:<span id="'+key+'-minutes">00</span>:<span id="'+key+'-seconds">00</span></div></td><td id="'+key+'-op-html"><div id="'+key+'-op-ajax"></div></td></tr>'); 
 
} 
 

 
setTimeout(function(){ 
 
    $('#9-minutes').text('15'); 
 
    $('#9-seconds').text('12'); 
 
}, 3000); 
 

 
setTimeout(function(){ 
 
    $('#9-minutes').text('00'); 
 
    $('#9-seconds').text('10'); 
 
}, 6000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="Table"> 
 
    <tbody> 
 
    </tbody> 
 
</table> 
 
<p>Results:</p> 
 
<div id="#results"> 
 
</div>

Answer 2

Основная причина, по которой он может не работать, заключается в том, что вы включаете div внутри td. Вы должны вложить их в DIV работать:

<div id="9-wt-html"> 
    <div id="9-wt-ajax"> 
    <span id="9-hours">00</span>: 
    <span id="9-minutes">15</span>: 
    <span id="9-seconds">12</span> 
    </div> 
</div> 

Затем в коде Jquery вы должны преобразовать поверочного текст Integre работы:

$('[id*="minutes"]').each(function() { 
    spanid = $(this).attr('id'); 

    console.log(spanid); 

    $("#" + spanid).on('change', function() { 

    spanval = parseInt($(this).text()); 
    id = $(this).attr('id').charAt(0); 

    if (spanval > 00) { 
     //$('#results').text(span); // ?where is span variable? 

     $("#" + id + "-wt-html").css({ 
     "background": "#FFE95B", 
     "color": "red" 
     }); 
    } else { 
     $("#" + id + "-wt-html").removeAttr("style") 
    } 
    }); 
}); 

Вот JSFiddle