爲什麼我的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 ***************"); 
     } 
    }); 

我已簽在Chrome調試工具沒有被記錄到控制檯當值大於2 - 我很少使用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事件用於輸入字段。只要輸入字段的值發生變化，它就會執行回調。

當有任何html更改時，使用Mutation Observers，但它對於此方案過於複雜，正如您知道html更改時所做的一樣，並且是通過您的代碼完成的。

---

其次，要附加一個事件監聽器#to-watch，我以爲是嵌套在#partialTable。現在我們已經知道change事件無論如何都不會工作，但即使這是一個輸入字段，我們將有以下問題：

1. 連接監聽器的DOM元素與#to-watch
2. 使得Ajax調用
3. 在返回ajax調用時，將其全部替換爲#partialTable。
4. 舊的#to-watch元素現在不見了，它也是事件監聽器。它不能再被觸發。

對此的解決方案稱爲event delegation。這意味着您將偵聽器附加到不會更改的父元素，並檢查是否有任何匹配選擇器的子元素髮生更改。這意味着id元素被動態地改變了，監聽者仍然會工作。

---

再就是也前述：

$('...').text()會給你任何DOM元素，其中作爲$('...').val()會給出一個輸入字段

JQUERY .text() docs

JQUERY .val() docs的值的內容

你想做一個數字比較（X > Y），所以你應該轉換爲「2」，這是$('#to-watch')

當您更新#partialTable文本轉換成整數與parseInt(x)

---

解決你的問題，你知道#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

相反的val（），您可以請嘗試文本（）在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