0

I have a dynamically-created control which I gave the ID "ckbxEmp"

As I discovered by "Viewing Source," Sharepoint (or Chrome, or "somebody") impertinently and presumptuously re-Ids (and names it, and "for"s it) this control, giving it the Welsh-esque "ctl00_ctl24_g_1caf4ad1_092d_4224_bd10_28ab028aab50_ctl00_ckbxEmp"

And so (I assume this is the reason), all attempts to manipulate "ckbxEmp" via jQuery fail - that is to say, when I look for the short ID I gave it, like so:

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

So I can either change that code to this:

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

...which would be okay as a one-time thing, but I have many dynamically-created controls that I will want to manipulate, and I assume they will all be Welshified, and this will be a bit of a pain.

-OR, hopefully there is a way to look for ID matches that are not exact but "ends with". Is that possible? If so, what is the syntax for that?

Note: This is a followup to this question.

UPDATE

Bizarrely enough (this is starting to get really irritating), this doesn't work, either:

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

UPDATE 2

Robert McKee's answer, plus the one from the question to which this is a follow-up, have led to a working solution, codely:

$(document).on("change", '[id$=ckbxEmp]', function () {
    alert('Function has been reached');
    if ($(this).is(":checked")) {
        alert("Checked");
    } else {
        alert("Not checked");
    }
});

"This is this. This ain't something else. This is this." - the Deer Hunter

Community
  • 1
  • 1
B. Clay Shannon-B. Crow Raven
  • 8,547
  • 144
  • 472
  • 862
  • That should work, but it looks like you have an encoded GUID in the control id, and it's possible that GUID is changing on you. You might want to change to using classes instead of IDs for that type of stuff. – Robert McKee Jun 02 '15 at 21:25
  • Classes would be fine if I only had one checkbox on the WebPart that needed to be monitored. Your answer works just swell/dandy. – B. Clay Shannon-B. Crow Raven Jun 02 '15 at 21:30

2 Answers2

1
$(document).on("change", '[id$=ckbxEmp]', function () {
Robert McKee
  • 21,305
  • 1
  • 43
  • 57
1

Use Jquery selector

To get all the elements starting with "ckbxEmp" you should use:

$(document).on("change", "[id^='ckbxEmp']", function () {

To get those that end with "ckbxEmp"

$(document).on("change", "[id$='ckbxEmp']", function () {
Ankur
  • 126
  • 9