为什么这个 jQuery 在我的 Sharepoint 页面上不起作用？

Question

我的 Sharepoint WebPart 的 .ascx 文件底部有这段代码：

<script>
$(document).ready(function () {
    alert("The ready function has been reached");
    $('#ckbxEmp').on("change", function () {
        if ($('#ckbxEmp').prop("checked")) {
            alert("Checked");
        } else {
            alert("Not checked");
        }
    });
});
</script>

在运行 WebPart 上（打开一个嵌入了 WebPart 的页面），我看到了 "The ready function has been reached" 警报，但是在单击复选框时，没有警报。

复选框在相应的 .ascx.cs 文件中创建如下：

var ckbxEmployeeQ = new CheckBox
{
    CssClass = "finaff-webform-field-input",
    ID = "ckbxEmp"
};

它在 jsfiddle 中工作 here：

我还尝试将 .ascx 文件中的代码更改为：

<script>
$(document).ready(function () {
    alert("The ready function has been reached");
});

$('#ckbxEmp').on("change", function () {
    if ($('#ckbxEmp').prop("checked")) {
        alert("Checked");
    } else {
        alert("Not checked");
    }
});
</script>

...我想也许我需要将事件处理程序与 "ready" 函数分开，但这没有区别 - 仍然不显示对 change/click 的任何响应复选框。

为什么不呢？

更新

我试过搜信的代码，但我仍然只看到"The ready function has been reached" - 点击复选框既不显示"Checked"也不显示"Not Checked"

我试过这个：

$(document).ready(function () {
    alert("The ready function has been reached");

    $(document).on("change", '#ckbxEmp', function () {
        if ($(this).prop("checked")) {
            alert("Checked");
        } else {
            alert("Not checked");
        }
    }); 
});

...然后是：

$(document).ready(function () {
    alert("The ready function has been reached");
});

$(document).on("change", '#ckbxEmp', function () {
    if ($('#ckbxEmp').prop("checked")) {
        alert("Checked");
    } else {
        alert("Not checked");
    }
});

...最后是这个：

$(document).ready(function () {
    alert("The ready function has been reached");

    $(document).on("change", '#ckbxEmp', function () {
        if ($('#ckbxEmp').prop("checked")) {
            alert("Checked");
        } else {
            alert("Not checked");
        }
    }); 
});

...但每次都得到完全相同（一半令人鼓舞，一半令人沮丧）的结果。

更新 2

Redi 追寻任何线索，我听从了 Claudio 的建议 "Viewed Source"。

我发现，除了在 jQuery 中一字不差地被发现之外，"ckbxEmp" 还嵌入了一个非常长的 "Welsh" 前缀中，其中那个怪物（这使得弗兰肯斯坦看起来像杰西卡Alba) 执行三重任务，"id"、"name" 和 "for":

<td><span class="finaff-webform-field-input"><input id="ctl00_ctl24_g_1caf4ad1_092d_4224_bd10_28ab028aab50_ctl00_ckbxEmp" type="checkbox" name="ctl00$ctl24$g_1caf4ad1_092d_4224_bd10_28ab028aab50$ctl00$ckbxEmp" /><label for="ctl00_ctl24_g_1caf4ad1_092d_4224_bd10_28ab028aab50_ctl00_ckbxEmp">Employee?</label></span></td>

所以这导致。

更新 3

工作解决方案是 SoulXin 和上面引用的答案的组合 ("another question" link)。简而言之，id，因为它已经被威尔士化了，所以必须这样找到：[id$=ckbxEmp]

Answer 1

这通常发生在您动态创建元素时。试试这个：

$(document).on("change", '#ckbxEmp', function () {
   if ($(this).prop("checked")) {
       alert("Checked");
   } else {
       alert("Not checked");
   }
});

看看Direct and delegated events

更新：

完整代码：

<script>
 $(document).on("change", '#ckbxEmp', function () {
   console.log('Function has been reached');
   if ($(this).is(":checked")) { //better
       alert("Checked");
   } else {
       alert("Not checked");
   }
 }); 
</script>

顺便说一下，最好使用 console.log('test') 而不是警报。此外，请查看对 post 的第一条评论。 ASP 在客户端更改 ID。而不是 #ckbxEmp 可能你需要：<%= ckbxEmp.ClientID %>

为什么这个 jQuery 在我的 Sharepoint 页面上不起作用？

Why is this jQuery not working on my Sharepoint page?

jquery

html

checkbox

sharepoint-2010

web-parts

更新

更新 2

更新 3