動態檢測跨度元素的變化

Question

我有從ajax響應動態生成的跨度元素。我試圖使用下面的代碼檢測跨度值的更改，它似乎在固定元素的jsfiddle中工作，但不是在動態生成數據的真實場景中。量程值用我試圖檢測的setInterval函數數量增量進行更新。

我正在採取的步驟是 - 會感謝一些建議，爲什麼我的代碼不會工作？

1. 對於帶有「分鐘」 <一個ID的所有元素 - 這將是我的span元素
2. 獲取ID的
3. 檢測的步驟與ID的所有元素的任何變化2
4. 當變化檢測，得到span元素值
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

它可能不工作的主要原因是因爲你在td中包含div。你需要將它們用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