Why is this jQuery not working on my Sharepoint page?

问题

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]

回答1:

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

来源：https://stackoverflow.com/questions/30602957/why-is-this-jquery-not-working-on-my-sharepoint-page