动态检测跨度元素的变化

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