Can I access a control by the last portion of its ID in jQuery?

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

Upvotes: 0

Views: 36

Answers (2)

Ankur
Ankur

Reputation: 126

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 () {

Upvotes: 1

Robert McKee
Robert McKee

Reputation: 21487

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

Upvotes: 1

Related Questions