¿Por qué este jQuery no funciona en mi página Sharepoint?

Tengo este código en la parte inferior del archivo .ascx de Sharepoint WebPart:

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

Al ejecutar el WebPart (al abrir una página que tiene el WebPart incrustado en él), veo la alerta “Se ha alcanzado la función de listo”, pero al hacer clic en la checkbox, no hay ninguna alerta.

La checkbox se crea así en el archivo correspondiente .ascx.cs:

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

Funciona en un jsfiddle aquí :

También traté de cambiar el código en el archivo .ascx a esto:

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

… pensando que tal vez necesitaba separar el controlador de eventos de la función “listo”, pero no hace ninguna diferencia, todavía no muestra ninguna respuesta a un cambio / clic de la checkbox.

Por qué no?

ACTUALIZAR

Probé el código de SouXin, pero solo veo “Se ha alcanzado la función de listo”: al hacer clic en la checkbox, no aparece “Marcado” ni “No marcado”.

Intenté esto:

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

…luego esto:

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

… y finalmente esto:

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

… pero obtenga los mismos resultados exactos (medio alentadores, medio desalentadores) cada vez.

ACTUALIZACIÓN 2

Redi para buscar alguna pista, seguí la sugerencia de Claudio y “Fuente vista”.

Descubrí que, además de encontrarse en jQuery textualmente, “ckbxEmp” también está incluido dentro de un monstruosamente largo prefijo “galés”, donde esa monstruosidad (que hace que Frankenstein se vea como Jessica Alba) hace triple tarea, para “id”. nombre “y” para “:

  

Entonces eso lleva a otra pregunta .

ACTUALIZACIÓN 3

La solución de trabajo es una combinación de SoulXin y la respuesta mencionada anteriormente (enlace “otra pregunta”). Para ser conciso, el ID, ya que ha sido Welshified, tiene que ser encontrado de esta manera: [id $ = ckbxEmp]

Suele suceder cuando creaste elementos dinámicamente. Prueba esto:

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

Echa un vistazo a los eventos directos y delegates

ACTUALIZAR:

Código completo:

  

Por cierto, mejor use console.log('test') lugar de alerta. Además, eche un vistazo al primer comentario de su publicación. ASP cambia la identificación en el lado del cliente. En lugar de #ckbxEmp posible, necesitas: <%= ckbxEmp.ClientID %>