値がより大きいときにjQuery関数が実行されないのはなぜですか？

Question

私はこのように定義された行を持つテーブルを持っている：

<tr> 
    <td id="to-watch"> 
     @Model.Results.Seats 
    </td> 
</tr> 

編集：テーブル値は、部分

のテーブルにデータを戻す作用にAJAX呼び出しによって更新されています私は値が2よりも大きい場合、コンソールにログを記録したい、ここで私が持っているjQueryのコードです：

$('#to-watch') 
    .change(function() { 
     if ($('#to-watch').val() > 2) { 
      console.log("************ WINNER ***************"); 
     } 
    }); 

は、私がチェックしました値が2より大きいとき、Chromeでのデバッグツールは何もコンソールに記録されていない - 私はめったにjQueryの/ JavaScriptを使用していない、といくつか見た後、答えを見つけることができませんでした。..

編集：私はこのようなAJAX呼び出しを作ってるんだ。その代わりヴァルの

$(document).ready(function() { 

    (function loop(i) { 
     setTimeout(function() { 
      callAjax(i); 
      //console.log("works " + i); 
     }, 
      500); // ms 
     function callAjax(i) { 
      $.ajax({ 
       url: '/Home/StartElection', 
       type: 'POST', 
       data: "test", 
       async: true 
      }) 
       .done(function (partialViewResult) { 
        $("#partialTable").html(partialViewResult); 
       }).always(function() { 
        if (--i) loop(i); 
       }); 
     }; 
    })(650); 
}); 

Answer 1

ここにいくつかの問題があります。

---

まず、changeイベントは、入力フィールドのためのものです。入力フィールドの値が変わるたびにコールバックを実行します。

Mutation Observersを使用してhtmlが変更された場合と同等ですが、htmlが変更されたときに知っているように、このシナリオではあまりに複雑です。

---

第二に、あなたは私が#partialTable内にネストされているとし#to-watchにイベントリスナーを、添付されています。今、私たちはすでにchangeイベントはとにかく動作しません知っているが、これは、入力フィールドであっても、私たちは次のような問題を持っているでしょう：

1. #to-watch
2. メイクのAJAX呼び出し
でDOM要素にリスナーをアタッチ
3. ajaxコールが戻ったら、#partialTableのすべてを新しいバージョンに置き換えてください。
4. 古い#to-watch要素が削除されました。イベントリスナーも同様です。それはもはや起動できません。

この解決策はevent delegationと呼ばれています。つまり、変更されない親要素にリスナーをアタッチし、セレクタに一致する子要素が変更されているかどうかを確認します。これは、idが動的に変更されたidであることを意味します。リスナーは引き続き動作します。

---

はその後も、前述あります

$('...').text()は、入力フィールド

JQUERY .text() docs

JQUERY .val() docsの値を与える$('...').val()として任意のDOM要素の内容にあなたを与えるだろう

数値比較（X > Y）は、あなたが

あなたは#partialTableを更新し、あなたの問題へparseInt(x)

---

溶液を用いて整数に$('#to-watch')のテキストである「2」は、あなたが#to-watchことを知っている文字列を変換する必要があります要素は今、それをチェックする時間があり、新たな価値を受け取った：

 function callAjax(i) { 
     $.ajax({ 
      url: '/Home/StartElection', 
      type: 'POST', 
      data: "test", 
      async: true 
     }).done(function (partialViewResult) { 
      $("#partialTable").html(partialViewResult); 
      if (parseInt($('#to-watch').text()) > 2) { 
       console.log("************ WINNER ***************"); 
      } 
     }).always(function() { 
      if (--i) loop(i); 
     }); 
    }; 

Answer 2

を（）あなたはjQueryの機能でテキストを（）してみてくださいすることができます。

Answer 3

text()を試してください。

text() - Sets or returns the text content of selected elements 
html() - Sets or returns the content of selected elements (including HTML markup) 
val() - Sets or returns the value of form fields 

Please check the this link for DOM Insertion using Jquery