<asp:checkbox>的jQuery click()事件未触发</asp:checkbox>

时间:2012-11-29 19:44:34

标签: jquery asp.net onclick

我有一个ASP.NET渲染的CheckBox。单击时,我希望jQuery捕获事件,但由于某种原因它无法正常工作。

这就是我到目前为止所做的事情:

ASP.NET

<table>
 <tr>
  <td>
   <asp:CheckBox runat="server" ClientIDMode="Static" 
                 id="testcb" name="testcb" />
  </td>
 </tr>
</table>

的jQuery

$("#testcb").click(function () {
    if ($(this).is(':checked')) alert("checked");
});

以下是浏览器的源代码:

<tr>
 <td>
  <span name="testcb">
   <input id="testcb" type="checkbox" 
          name="ctl00$ctl00$bodyContent$phMainContent$testcb">
  </span>
 </td>
</tr>

3 个答案:

答案 0 :(得分:4)

我认为问题可能是你的jQuery脚本在呈现相关元素之前被触发了。

尝试以下方法:

<script type="text/javascript">
  $(document).on('ready', function () {
      $("#testcb").on('click', function () {
          var $cb = $(this);
          if ($cb.is(':checked')) {
              alert("checked");
          }
      });
  });
</script>

如果没有$(document).on('ready' ...部分,则无法保证在绑定.click()之前,文档在浏览器中完全呈现。此外,.on()甚至应该在调用它之前不存在的元素上工作(类似于以前版本的jQuery中的旧.live()函数)。

请参阅this jsFiddle作为示例。

答案 1 :(得分:2)

你可以试试这个:

$(document).ready(function() {
  $("#testcb").click(function(){
    if ($(this).attr("checked") == "checked"){
      alert("checked");
    } else {
      alert("unchecked");
    }
  });
});

答案 2 :(得分:1)

由于ASP复选框实际上解析为跨度和输入,您可能想要检查复选框的第一个子项:

$("#testcb").click(function () {
        if ($(this).children(':first').is(':checked')) alert("checked");
 });

编辑:

我通常在复选框的声明中设置一个onclick,所以我不确定这是否可行但是试试这个:

$("#testcb").children(':first').click(function () {
        alert('fire!');
        if ($(this).is(':checked')) alert("checked");
 });