为什么这个jQuery不能在我的Sharepoint页面上工作？ [英] Why is this jQuery not working on my Sharepoint page?

问题描述

 < script>我的Sharepoint WebPart的.ascx文件的底部有这样的代码： 
 $（document）.ready（function（）{
 alert（就绪函数已经到达）; 
 $（'＃ckbxEmp'）。on（change，function （）{
 if（$（'＃ckbxEmp'）。prop（checked））{
 alert（Checked）; 
} else {
 alert（未勾选）; 
} 
}）; 
}）; 
< / script> 
  

在运行WebPart（打开一个嵌入了WebPart的页面）时，我看到 ready函数已经到达警告状态，但是在点击复选框时，没有提示。

复选框在相应的.ascx.cs文件中就像这样创建：

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

它适用于jsfiddle here ：

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

 < script> 
 $（document）.ready（function（）{
 alert（已准备好的函数已经到达）; 
}）; $（$＃
 $（'＃ckbxEmp'）。on（change，function（）{
 if（$（'＃ckbxEmp'）。prop（checked））{
 alert（Checked）; 
} else {
 alert（Not checked）; 
} 
}）; 
< / script> 
  

...想到也许我需要使事件处理函数与ready函数分开，但它没有区别 - 仍然没有显示任何对更改/点击复选框的响应。

为什么不能？

$ b

我尝试了SouXin的代码，但我仍然只看到已准备就绪的功能已经达到 - 点击复选框既不显示已检查也没有未检查

我试过这个：

  $（文档）.ready（函数（）{
 alert（已准备好的函数已经到达）; 
 
 $（document）.on（change，'#ckbxEmp'，function （）{
 if（$（this）.prop（checked））{
 alert（Checked）; 
} else {
 alert（Not checked ）; 
} 
}）; 
}）; 
  

...那么这个：

 $（document）.ready（function（）{
 alert（已准备就绪的函数）; 
}）; $（$＃
 $ b $（document）.on（change，'#ckbxEmp'，function（）{
 if（$（'＃ckbxEmp'）。prop（checked））{ 
 alert（Checked）; 
} else {
 alert（Not checked）; 
} 
}）; 
  

...最后这个：

<$ $（b

$（document））。 on（change，'#ckbxEmp'，function（）{
if（$（'＃ckbxEmp'）。prop（checked））{
alert（Checked）;
$ else {
alert（Not checked）;
}
}）;
}）;

...但每次都得到相同的结果（半鼓励，半结果）。

更新2

Redi为了追踪任何线索，我遵循Claudio的建议和来源 p>

我发现除了在jQuery中逐字查找之外，ckbxEmp也嵌入在一个巨大的威尔士前缀中，那里的怪物（这使得弗兰肯斯坦看起来像杰西卡Alba）对于id，name和for三重职责：

 < td><< t ; span class =finaff-webform-field-input>< input id =ctl00_ctl24_g_1caf4ad1_092d_4224_bd10_28ab028aab50_ctl00_ckbxEmptype =checkboxname =ctl00 $ ctl24 $ g_1caf4ad1_092d_4224_bd10_28ab028aab50 $ ctl00 $ ckbxEmp/>< label for = ctl00_ctl24_g_1caf4ad1_092d_4224_bd10_28ab028aab50_ctl00_ckbxEmp>员工< /标签>< /跨度>< / TD> 
  

因此，导致。

UPDATE 3

工作解决方案是SoulXin和上面提到的答案（另一个问题链接）的结合。为了简洁起见，这个id，因为它已被Welsh化了，必须这样找到：[id $ = ckbxEmp]

解决方案

它通常会在您动态创建元素时发生。
试试这个：
$ b $ pre $ $（$ document $）$（document）.on（change，'#ckbxEmp'，function（） {
if（$（this）.prop（checked））{
alert（Checked）;
} else {
alert（Not checked）;
}
}）;

查看直接和委托事件

更新：

完整代码：

 < script> 
 $（document）.on（change，'#ckbxEmp'，function（）{
 console.log（'Function already reached'）; 
 if（$（this） .is（：checked））{// better 
 alert（Checked）; 
} else {
 alert（Not checked）; 
} 
}）; 
< / script> 
  

顺便说一下，最好使用 console.log（'test'）而不是警报。
此外，请阅读您的帖子的第一条评论。 ASP在客户端更改ID。而不是 #ckbEEmp 可能需要：<％= ckbxEmp.ClientID％>

I have this code at the bottom of my Sharepoint WebPart's .ascx file:

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

On running the WebPart (opening a page that has the WebPart embedded in it), I see the "The ready function has been reached" alert, but on clicking the checkbox, there is no alert.

The checkbox is created like so in the corresponding .ascx.cs file:

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

It works in a jsfiddle here:

I also tried changing the code in the .ascx file to this:

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

...thinking that maybe I needed to make the event handler separate from the "ready" function, but it makes no difference - still doesn't display any response to a change/click of the check box.

Why not?

UPDATE

I tried SouXin's code, but I still only see "The ready function has been reached" - clicking the checkbox shows me neither "Checked" nor "Not Checked"

I tried this:

$(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");
        }
    }); 
});

...then this:

$(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");
    }
}); 

...and finally this:

$(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");
        }
    }); 
});

...but get the same exact (half-encouraging, half-discouraging) results each time.

UPDATE 2

Redi to pursue any clue, I followed Claudio's suggestion and "Viewed Source".

I found that, besides being found in the jQuery verbatim, "ckbxEmp" is also embedded within a monstrously long "Welsh" prefix, where that monstrosity (which makes Frankenstein look like Jessica Alba) does triple-duty, for "id", "name", and "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>

So that leads to another question.

UPDATE 3

The working solution is a combination of SoulXin's and the answer referenced above ("another question" link). To be terse, the id, since it has been Welshified, has to be found this way: [id$=ckbxEmp]

解决方案

It usually happens when you created elements dynamically. Try this:

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

Take a look on Direct and delegated events

UPDATE:

Full code:

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

By the way, better use console.log('test') instead of alert. Moreover take a look on the 1st comment to your post. ASP changes id on client side. Instead of #ckbxEmp possible you need: <%= ckbxEmp.ClientID %>

这篇关于为什么这个jQuery不能在我的Sharepoint页面上工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！