为什么我的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