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

Posted 2023-03-27

【中文标题】为啥这个 jQuery 在我的 Sharepoint 页面上不起作用？

【英文标题】：Why is this jQuery not working on my Sharepoint page?为什么这个 jQuery 在我的 Sharepoint 页面上不起作用？

【发布时间】：2015-08-16 15:38:09

【问题描述】：

我的 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 的页面），我看到“已达到就绪功能”警报，但在单击复选框时，没有警报。

复选框在相应的 .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>

...认为我可能需要将事件处理程序与“就绪”函数分开，但这没有区别 - 仍然不会显示对复选框的更改/单击的任何响应。

为什么不呢？

更新

我试过搜心的代码，但我仍然只看到“已达到就绪功能”-单击复选框显示我既没有“选中”也没有“未选中”

我试过这个：

$(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 的建议和“查看源代码”。

我发现，除了在 jQuery 中逐字逐句地找到之外，“ckbxEmp”还嵌入在一个非常长的“威尔士”前缀中，其中那个怪物（这让弗兰肯斯坦看起来像 Jessica Alba）有三重职责，对于“id ”、“名称”和“为”：

<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>

所以这导致another question。

更新 3

有效的解决方案是 SoulXin 和上面引用的答案（“另一个问题”链接）的组合。简而言之，id 已经被威尔士语化了，因此必须以这种方式找到：[id$=ckbxEmp]

【问题讨论】：

你有没有检查过你生成的html，看看是否有一个id为ckbxEmp的元素？ asp.net 在向客户端发送 html 时通常会更改 ids

我会捷克那个；但如果是这样的话，它会永远是同一件事，还是“神秘肉”——这次是这个ID，下次是那个ID，等等？

【参考方案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') 而不是警报。 此外，请查看您帖子的第一条评论。 ASP 在客户端更改 id。而不是#ckbxEmp，您可能需要：<%= ckbxEmp.ClientID %>

【讨论】：

不要把这段代码放在$(document).ready里面，是单独构造的。

我确实尝试过（更新中的第二个（“然后这个”）示例）。我认为问题在于复选框的 id、名称和“for”（无论是什么）实际上是“ctl00_ctl24_g_1caf4ad1_092d_4224_bd10_28ab028aab50_ctl00_ckbxEmp”而不仅仅是“ckbxEmp”（参见更新 2）

对动态 id 使用 jquery 选择器，例如 '$("id$='ckbxEmp'")'