jquery - dynamically detect change to span element -

-

i have span elements dynamically generated ajax response. trying detect change span value using below code , seems work in jsfiddle fixed elements not in real scenario data dynamically generated. span values updated setinterval function number increment trying detect.

the steps taking - appreciate advice on why code not working?

  1. for elements id containing "minutes" <- these span elements
  2. get id's
  3. detect change in elements id's step 2
  4. when change detected, span element value
  5. check if span value greater 00 i.e. 01 (this minute value)
  6. if condition step 5 met apply css
  7. if condition step 5 not met remove 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")        }     }); });

sample 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>

the above span elements created before ajax call using fixed script below:

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>'); }

okay, have created snippet below based on understandings.

also, highlight below points.

for span element, can't listen change event. instead, code below listen domsubtreemodified event.

also, can directly listen event of element using $('[id*="minutes"]').on('domsubtreemodified', function(){}) if element exists before line.

otherwise, have listen same parent or document given below.

$('#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 this?                $("#"+id+"-wt-html").css({"background":"#ffe95b", "color":"red"});      } else {              $("#"+id+"-wt-html").removeattr("style")      }  });    var skills_arr = {    '9': 'some value here'  };    (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>


Comments

Post a Comment

Popular posts from this blog

jsf - "PropertyNotWritableException: Illegal Syntax for Set Operation" error when setting value in bean -

-
this question has answer here: how send form input values , invoke method in jsf bean 1 answer i error when trying send values jsf page bean. i want set values fields in bean, create airplane instance , add database. error telling me use illegal syntax setter part of bean. why error? didnt find on site helped me problem. here jsf part: <h4>add plane</h4> <c:if test="#{not empty listairplanebb.error}"> <div class="alert alert-danger"> <span class="glyphicon glyphicon-remove"></span> <h:outputtext value="#{listairplanebb.error}" /> </div> </c:if> <h:form> <table class="table"> <thead> ...
Read more

laravel - Undefined property: Illuminate\Pagination\LengthAwarePaginator::$id (View: F:\project\resources\views\admin\carousels\index.blade.php) -

-
when try pass variable data view error, can't find document problem controller(carouselcontroller.php) public function index() { $carousels = carousel::orderby('created_at', 'asc')->paginate(12); return view('admin.carousels.index')->withcarousels($carousels); } my view(index.blade.php) <div class="row"> <div class="col-md-9"> <h1>all images</h1> </div> <div class="col-md-3"> <a href="{{ route('carousels.create') }}" class="btn btn-lg btn-block btn-primary ">create new carousel</a> </div> <div class="col-md-12"> <hr> </div> </div>{{-- end of row --}} <div class="row"> <div class="col-md-12"> <div class="row"> @foreach($carousels $photo) <div class="col-xs-6 col-md...
Read more

arrays - Algorithm to find ideal starting spot in a circle -

-
so problem have been debating such: your given array of integers representing circle. then, have pick spot in circle start. place start, compare value @ array number of steps took there , if steps less or equal number, include in final set. find place start have elements in set. ex, a=[0, 1, 2] if start @ index=0, then: a[0]=0 < =0 0 included a[1]=1 < =1 1 included a[2]=2 < =2 2 included final set: {0,1,2} if start @ index=1, then: a[1]=1 > 0 1 not included a[2]=2 > 1 2 not included here loop around a[0]=0 > 2 0 included final set: {0} if start @ index=2, then: a[2]=2 > 0 2 not included, here loop around a[0]=0 < = 1 0 included a[1]=1 < = 2 1 included final set: {0,1} so in trivial case, starting position index=0 best position results in final set elements. brute force method of finding obvious, trying find more efficient method. attempts far have been examine trying find max intersect of viable starting ranges calculated each element in arr...
Read more